javascript如何获取body的scrollTop



javascript如何获取body的scrollTop?如何想要获取不同浏览器下body的scrollTop值?

首先,需要了解不同浏览器下的scrollTop差异:
iE 6/7/8 :
文档头部没有DOCTYPE声明 :需要使用document.body.scrollTop来获取scrollTop。
文档头部存在DOCTYPE声明 :需要使用document.documentElement.scrollTop来获取scrollTop。
Firefox / Chrome / Opera / iE 9+ 等:
使用document.documentElement.scrollTop来获取scrollTop。
Safari:
safari比较特殊,它使用window.pageYOffset来获取scrollTop。
然后,需要了解怎么使用它们才更方便:
刚开始以为使用“||”把三种方法连起来,就可以让不同的浏览器使用本身支持的方法获取scrollTop值,但发现当三种方法的书写顺序为:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
时,在iE中出现问题了,iE提示出现错误。
这是因为在iE中 window.pageYOffset返回undefined,而且iE中“0 || undefined”返回的值是undefined;所以,iE中,当滚动条在顶端时(即document.documentElement.scrollTop 或 document.body.scrollTop 为0),得到的scrollTop = 0 || undefined = undefined,所以接下来的运算会出现错误。
解决方法:不要把window.pageYOffset放到三种方法的最后。例如
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;可以解决所有主流浏览器获取scrollTop值的问题。
注:尽量把document.documentElement.scrollTop放在最前面,因为绝大部分html文档头部都有DOCTYPE声明,把它放到第一个位置,大多数网页,浏览器只需解析document.documentElement.scrollTop就可以了,其他两项就不会再解析,从而可以减少浏览器的计算时间。