获取scrollTop兼容各浏览器的方法以及浏览器对scroll相关的兼容性

1、各浏览器下 scrollTop的差异
IE6/7/8：
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset ；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；
2、获取scrollTop值
完美的获取scrollTop 赋值短语：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。
仔细观察这句赋值，你发现啥了没？？
没错，就是 window.pageYOffset (Safari) 被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行或运算时，系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端，即scrollTop值为 0 时。 IE 下 window.pageYOffset (Safari) 返回为 undefine ，此时将window.pageYOffset (Safari) 放在或运算最后面时， scrollTop 返回 undefine , undefine 用在接下去的运算就会报错咯。
而其他浏览器无论 scrollTop 赋值或运算顺序如何都不会返回 undefine. 可以安全使用..
所以说到头还是IE的问题咯. 杯具…
精神有点恍惚，不知道有没有表达清楚。
不过最后总结出来这句实验过OK，大家放心使用；
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

DTD相关说明：

页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。

页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容，不管有没有 DTD，可以使用如下代码：

var scrollTop = window.pageYOffset  //用于FF
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;

3. scroll事件

我在绑定全局的scroll事件的时候有一点是比较纠结的，是绑定到window还是document, document.body, document.documentElement，参考这篇文章可以对不同浏览器对scroll事件的兼容性有大致的了解

总结下来就是对于普通的元素都是有scroll事件的，但是如果想给浏览器的整个窗口绑scroll事件的话，要绑在window上以避免兼容性的问题

4. scroll相关的属性

原生得DOM api如果想要取得scrollLeft和scrollTop的值在普通的DOM上是没问题的，但是在浏览器的层面上又出现了问题了，参考这篇文章，但是这篇文章的年代有些久远，有些地方已经出现偏差

获取scrollTop兼容各浏览器的方法以及浏览器对scroll相关的兼容性

实际的检测中在chrome32 下标准模式(后面再写博客介绍)下已经开始推荐使用document.documentElment,因为在标准模式下的console里会有warning

body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode.

也就是说新版本的chrome在标准模式下通过body, html都能取到值了，但是在怪异模式下还是只能通过body来取得的

但是如果是通过jQuery的apijQuery.scrollTop()来获取的话$(window)都是能获取到的，$('body'), $('html')能不能获取到就要参照上图了，在设置的时候也是$(window)设置都能够起效，但是另两个就要参照上图了，现在看起来jquery获取浏览器滚动条的位置也应该用window了，但是我们忽略了一个地方就是animate

jQuery的animate支持对scrollTop, scrollLeft属性做动画

In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated.

但是如果我们将这个动画加在window上的话不管哪个浏览器都不能起效了, 保险的做法是把动画加在$('body, html')，这会有一个副作用是如果动画带回调函数的画，会执行两次，这可能会给有些单元测试代码带来一些麻烦

转载于:https://blog.51cto.com/bangejuhao/1671138