各浏览器scrollTop差异及兼容解决办法

1、各浏览器下 scrollTop的差异

IE:

 对于没有doctype声明的页面,使用  document.body.scrollTop 或 document.documentElement.scrollTop; 

 对于有doctype声明的页面,则使用 document.documentElement.scrollTop;

Chrome、Firefox: 

 对于没有doctype声明的页面,使用  document.body.scrollTop 来获取 scrollTop高度 ; 

 对于有doctype声明的页面,则使用 document.documentElement.scrollTop; 

Safari: 

 safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ; 

2、解决办法

因此,为了兼容所有浏览器,封装一个函数,去获取页面向上卷曲出去的距离和向左卷曲出去的距离

//获得页面向左、向上卷动的距离
function getScroll(){
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
}

おすすめ

転載: blog.csdn.net/qq_41887214/article/details/121031662