chrome下document.body.scrollTop一直为0

背景

今天在测试一个效果时，发现在chrome下通过document.body.scrollTop获取滚动条位置一直返回为0。

原因

在很早之前的chrome版本中只能通过document.body.scrollTop来获取滚动条的位置。

也不知从哪个版本开始，chrome获取滚动条的位置调整成了document.documentElement.scrollTop

分析

各浏览器下 scrollTop的差异

IE6/7/8：

可以使用document.documentElement.scrollTop；不支持window.pageYOffset

IE9及以上：

可以使用window.pageYOffset或者document.documentElement.scrollTop

Safari:

safari：window.pageYOffset与document.body.scrollTop都可以；

Firefox:

火狐等等相对标准些的浏览器就省心多了，直接用window.pageYOffset 或者document.documentElement.scrollTop ；

Chrome：

谷歌浏览器只认识document.body.scrollTop;

谷歌浏览器某个版本之后支持document.documentElement.scrollTop和window.pageYOffset，不在支持document.body.scrollTop；

scrollTOP 兼容性的写法

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;