浏览器获取正确的scrollTop值

最新推荐文章于 2021-10-25 15:14:39 发布

转载最新推荐文章于 2021-10-25 15:14:39 发布 · 235 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ttcc/p/3923508.html

本文详细解析了在不同浏览器（如IE6-8、Firefox、Chrome、Safari等）中使用窗口滚动条属性（window.pageYOffset、window.scrollY、document.body.scrollTop、document.documentElement.scrollTop）时的兼容性和实现方式。通过比较quirk模式和非quirk模式下这些属性的表现，提供了一套在Win7环境下测试得到的适用代码逻辑，帮助开发者在跨浏览器环境中正确使用滚动条属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事，注IE9 开始支持此属性。

window.scrollY 被Firefox, Google Chrome , Safari支持不关doctype的事, 注IE9 不支持此属性。

在（quirk 模式）的时候 document.body.scrollTop 在 Internet Explorer, Firefox, Opera, Google Chrome Safari 返回正确的值。
在（quirk 模式）的时候 document.documentElement.scrollTop 永远是零。

在（非quirk模式）的时候 document.documentElement.scrollTop在 Internet Explorer, Firefox and Opera 下返回正确的值但是在 Google Chrome ，Safari 中永远是零。

特整理表格如下：

只在quirk模式下， body.scrollTop是被所有都支持的，所以这个表大家不用也没有必要去记，只要记住一条：以上在win7环境下测试，可以看出是非常凌乱的！

1 if(window.pageYOffset){//这一条滤去了大部分， 只留了IE678
2 
3 }else if(document.documentElement.scrollTop ){//IE678 的非quirk模式
4 
5 }else if(document.body.scrolltop){//IE678 的quirk模式
6 
7 }