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 事件监听器，在触发滚动条事件后，将消息打印出来，最终可以汇总为下表：

 IE6IE7IE8FirfoxChromeSafariOpera QSQSQSQSQSQSQSwindow 对象YYYYYYYYYYYYYYdiv 对象YYYYYYYYYYYYYYdocument 对象NNNNNNYYYYYYNNdocument.body 对象YNYYYNNNNNNNYYdocument.documentElement 对象NYNYNYNNNNNNNN

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 Operawindow.onscrollOK

可见，所有浏览器中的 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 OperaDIVElement.onscrollOK

可见，所有浏览器中的普通 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 SafariIE6(Q) IE7 IE8(Q) Operadocument.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 SafariIE6(Q) IE7 IE8(Q) Operadocument.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 Safaridocument.documentElement.onscrollOK无内容输出

可见，在 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 滚动