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);
        }

你可能感兴趣的:(js中Scroll家族的封装和使用)