FireFox与Chrome的scrollTop的兼容问题
2017-05-10 本文已影响0人
牛奶是本命___
做页面时需要判断页面滚动距离让列表对应文字变色，之前直接用document.body.scrollTop获取滚动距离，结果打开火狐发现不可以，获取不到
原生接口测试
Paste_Image.png
document.documentElement 即 <html> 元素，而 document.body 即 <body> 元素。
测试结果，在火狐上只能通过html元素来获取和设定页面滚动高度，而在谷歌上反之只能用body元素来获取和设定
jquery接口测试
Paste_Image.png
采用 $(document) 可以实现对获取和设定scrollTop的兼容
scrollTop动画实现测试
虽然实现了兼容，但为了有更好的效果，希望采用动画的方式滚动到页面的某位置，而不是直接跳转，这里采用jquery的 animate 函数来实现。
Paste_Image.png
发现虽然可以采用$(document)来实现获取和设定，但动画效果都无法使用，还是只能用body元素和html元素来实现。
最终解决
- 获取或直接设定当前页面滚动高度：
$(document).scrollTop();//获取，兼容火狐谷歌 - 有动画效果的设定当前页面滚动高度：
$("body,html").animate({ scrollTop: ... });//动画滚动效果，兼容火狐谷歌
如果想完美兼容各大浏览器的scrolltop
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
ie8、7、6 兼容scroll事件
$(window).bind("scroll",function(){ //…… });
