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
 QSQSQSQSQSQSQS
window 对象YYYYYYYYYYYYYY
div 对象YYYYYYYYYYYYYY
document 对象NNNNNNYYYYYYNN
document.body 对象YNYYYNNNNNNNYY
document.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 Opera
window.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 Opera
DIVElement.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) 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 SafariIE6(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.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 滚动

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值