打印

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 滚动