明凯博客

关注网站技术,一个特立独行的程序员

各种浏览器窗口scrollTop 的兼容性问题详解

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模式 IE6 7 8 IE9 firefox opera chrome safari
scrollY undefined undefined 正确 正确 正确 正确
pageYOffset undefined 正确 正确 正确 正确 正确
body.scrollTop 0 0 0 0 正确 正确
scrollTop 正确 正确 正确 正确 0 0
quirk 模式 IE6 7 8 IE9 firefox opera chrome safari
scrollY undefined undefined 正确 正确 正确 正确
pageYOffset undefined 正确 正确 正确 正确 正确
body.scrollTop 正确 正确 正确 正确 正确 正确
scrollTop 0 正确 0 0 0 0

以上在win7环境下测试,

可以看出是非常凌乱的。

只在quirk模式下, body.scrollTop是被所有都支持的,

所以这个表大家也不用,也没有必要去记, 只要记住一条。

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

原则是看pageYOffset 然后看documentElement.scrollTop, 最后是document.body.scrollTop。

当然 也可以直接scrollTop 而不使用pageYOffset,

以下是MDN 提供的兼容性代码:

1
2
scrolltop = (((t = document.documentElement) || (t = document.body.parentNode))
 && typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop

, , , ,

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注