js中Scroll家族的封装和使用

原生js对window滚动事件封装:

  • 代码:
function scroll(){
    if(window.pageXOffset != null){ // ie9+ 和 最新浏览器
        return {
            top: window.pageYOffset,
            left: window.pageXOffset
        }
    }else if(document.compatMode == 'CSS1Compat'){ // 遵循W3C浏览器
        return {
            top: document.documentElement.scrollTop,
            left: document.documentElement.scrollLeft
        }
    }
    return {//其他
        top: document.body.scrollTop,
        left: document.body.scrollLeft
    }
}
  • 用法:
window.onscroll = function(){
        console.log(scroll().top);//获取滚动y值
        console.log(scroll().left);//获取滚动left值
    };

var btn = document.getElementById('btn');
        btn.onclick = function(){
            // 让页面滚动起来
            window.scrollTo(0, 1000);
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 6,707评论 0 5
  • 本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!! 博客地址 点击跳转...
    西巴撸阅读 3,788评论 0 2
  • offset家族三大家族和一个事件对象三大家族(offset/scroll/client)事件对象/event ...
    Yuann阅读 4,558评论 0 5
  • 滚动事件的认识 实际开发中,我们经常需要监听滚动事件 滚动事件一般是由 window 来触发 不同浏览器中获取滚动...
    GodlinE阅读 1,267评论 0 0
  • 昨晚小一万出去洗头回来,我坐在沙发上打了好几个喷嚏就感冒了。 小一万给我烧了好几杯热水,可是感冒不是一下子就能与你...
    007写了自己的生活阅读 3,418评论 0 4