scrollTop的兼容性小结

JavaScript

来自http://blog.sina.com.cn/s/blog_6d3183b5010140nr.html

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

以上在win7环境下测试

可以看出是非常凌乱的

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

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

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 提供的兼容性代码

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

来自http://blog.csdn.net/yycai/article/details/4008815

在页面上加上了

<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.01   Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

之后，document.body.scrollTop的值一直为0（在IE和FF下），网上有人改为document.documentElement.scrollTop就可以了，试用了一下真的OK了。

但是当换到Google浏览器时，问题又出来了，document.documentElement.scrollTop值一直为0！到是document.body.scroll的值正确了。

解决方法：

var top = document.body.scrollTop | document.documentElement.scrollTop;