SD9013: 各浏览器对于 document、document.body、document.documentElement 对象的 onscroll 事件的支持存在差异

标准参考

scroll 事件会在文档或一个元素滚动时触发。

有关 scroll 事件的详细资料：

参见：W3C DOM Level-2 规范

参见：W3C DOM Level-3 草案

问题描述

各浏览器 document、document.body、document.documentElement 对象的 onscroll 事件的支持存在差异。

造成的影响

为 document、document.body、document.documentElement 对象绑定 onscroll 事件后在不同浏览器中可能不会按预期触发相应的事件处理函数。

受影响的浏览器

所有浏览器

问题分析

1.各浏览器对 document、document.body、document.documentElement 对象的 onscroll 事件支持情况

依次为 window、HTMLDivElement、document、document.body、document.documentElement 对象绑定 scroll 事件监听器，在触发滚动条事件后，将消息打印出来，最终可以汇总为下表：

	IE6	IE7	IE8	Firfox	Chrome	Safari	Opera
	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S
window 对象	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
div 对象	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
document 对象	N	N	N	N	N	N	Y	Y	Y	Y	Y	Y	N	N
document.body 对象	Y	N	Y	Y	Y	N	N	N	N	N	N	N	Y	Y
document.documentElement 对象	N	Y	N	Y	N	Y	N	N	N	N	N	N	N	N

2. 所有浏览器支持 window 对象的 scroll 事件

分析以下代码：

<script type="text/javascript">
window.onscroll = function(){
document.getElementById("info").innerHTML='OK';
};
</script>
<div id="info" style="height:3000px;"></div>

info 的高度设为 3000px，为了让浏览器出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么页面上会出现 "OK" 的文本。
在各浏览器下的输出：(移动滚动条后的截图)

	IE6 IE7 IE8 Firefox Chrome Safari Opera
window.onscroll	OK

可见，所有浏览器中的 window 对象都支持 scroll 事件。

3. 所有浏览器都支持普通 DIV 对象的 scroll 事件

分析以下代码：

<script language="javascript">
window.onload = function() {
document.getElementById("div1").onscroll = function() {
document.getElementById("info").innerHTML = 'OK';
};
}
</script>
<div id="div1" style="width:100px; height:100px;border:1px solid red; overflow:scroll;">
<div id="info" style="height:3000px; width:20px;background:green;"></div>
</div>

info 的高度设为3000px，为了让 div1 出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么绿色背景的 div1上会出现 "OK" 的文本。
在各浏览器下的输出：(移动滚动条后的截图)

	IE6 IE7 IE8 Firefox Chrome Safari Opera
DIVElement.onscroll	OK

可见，所有浏览器中的普通 DIV 对象都支持 scroll 事件。

4. 各浏览器对 document 对象 scroll 事件的支持

分析以下代码：

<script type="text/javascript">
window.onload = function() {
document.onscroll = function() {
document.getElementById("info").innerHTML = 'OK';
};
}
</script>
<div id="info" style="height:3000px;"></div>

info 的高度设为 3000px，为了让 div1 出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么页面上会出现 "OK" 的文本。
在各浏览器下的输出：(移动滚动条后的截图)

	IE6(S) IE8(S) Firefox Chrome Safari	IE6(Q) IE7 IE8(Q) Opera
document.onscroll	无内容输出	OK

可见，在IE6(Q) IE7 IE8(Q) Opera 中，document.body 对象支持 scroll 事件。其他浏览器中不支持。

5. 各浏览器对 document.body 对象 scroll 事件的支持

分析以下代码：

<script type="text/javascript">
window.onload = function() {
document.body.onscroll = function() {
document.getElementById("info").innerHTML = 'OK';
};
}
</script>
<div id="info" style="height:3000px;"></div>

info 的高度设为 3000px，为了让 div1 出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么页面上会出现 "OK" 的文本。
在各浏览器下的输出：(移动滚动条后的截图)

	IE6(S) IE8(S) Firefox Chrome Safari	IE6(Q) IE7 IE8(Q) Opera
document.body.onscroll	无内容输出	OK

可见，在 IE6(Q) IE7 IE8(Q) Opera 中，document.body 对象支持 scroll 事件。其他浏览器中不支持。

6. 各浏览器对 document.documentElement 对象 scroll 事件的支持

分析以下代码：

<script type="text/javascript">
window.onload = function() {
document.documentElement.onscroll = function() {
document.getElementById("info").innerHTML = 'OK';
};
}
</script>
<div id="info" style="height:3000px;"></div>

info 的高度设为3000px，为了让 div1 出现滚动条，这样才能触发滚动事件。
如果 scroll 事件被触发，那么页面上会出现 "OK" 的文本。
在各浏览器下的输出：(移动滚动条后的截图)

	IE6(S) IE7(S) IE8(S)	IE6(Q) IE7 IE8(Q) Opera Firefox Chrome Safari
document.documentElement.onscroll	OK	无内容输出

可见，在 IE6(S) IE7(S) IE8(S) 中，document.documentElement 对象支持 scroll 事件。其他浏览器中不支持。

解决方案

在给整个浏览器窗口绑定滚动事件 (scroll) 的时候，绑定到 window 对象上。

参见

知识库

...

相关问题

...

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6 Chrome 4.0.302.3 dev Safari 4.0.4 Opera 10.60
测试页面:	SD9013-1.html SD9013-2.html SD9013-3.html SD9013-4.html SD9013-5.html
本文更新时间:	2010-07-26

关键字

window document scroll onscroll 滚动