标准参考
scroll 事件会在文档或一个元素滚动时触发。
有关 scroll 事件的详细资料:
问题描述
各浏览器 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 滚动