JS之解决scroll方法不兼容的写法来获取top和left

需求：封装一个兼容的scroll(),返回值是json，用scroll().top获取scrollTop
需求：封装一个兼容的scroll(),返回值是json，用scroll().left获取scrollLeft

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style type="text/css">
body{
    height: 5000px;
    width: 5000px;
}
</style>
</head>
<body>

<script type="text/javascript">
//设置滚动事件
window.onscroll = function(){
//调用这个方法
console.log(scroll().top);
console.log(scroll().left);    
}

//需求：封装一个兼容的scroll(),返回值是json，用scroll().top获取scrollTop
//需求：封装一个兼容的scroll(),返回值是json，用scroll().left获取scrollLeft
function scroll(){
    //如果这个属性存在，那么返回值应该是0-无穷大
    //如果没有返回值是undefined
    //只要判断不是undefined就可以调用此方法
    if (window.pageYOffset !==undefined) {
        var json = {
            "top":window.pageYOffset,
            "left":window.pageXOffset
        };
        return json;
    }else if (document.compatMode === "CSS1Compat") {//有DTD约束
        return {
            "top":document.documentElement.scrollTop,
            "left":document.documentElement.scrollLeft
        };
    }else{//没有DTD约束
        return {
            "top":document.body.scrollTop,
            "left":document.body.scrollLeft
        };
    }
    //简单写法
    // return {
    //         "top":document.body.scrollTop || document.documentElement.scrollTop || document.documentElement.scrollTop,
    //         "left":document.body.scrollLeft || document.documentElement.scrollLeft ||  window.pageXOffset
    //     };
}
</script>
</body>
</html>

 

posted @ 2017-12-28 16:49  乖乖乖码  阅读(1377)  评论(0)  编辑  收藏  举报