您现在的位置:首页 >> 前端 >> 内容

如何封装自己的scroll?

时间:2018/4/26 14:28:11 点击:

  核心提示:由于不同版本的浏览器对于scroll的兼容性的支持不一样,所以我们需要做兼容性的考虑。为了避免每次使用的时候都要做兼容性的考虑。我们封装了scroll的函数。可以引入到样式中。!DOCTYPE htm...

由于不同版本的浏览器对于scroll的兼容性的支持不一样,所以我们需要做兼容性的考虑。为了避免每次使用的时候都要做兼容性的考虑。我们封装了scroll的函数。可以引入到样式中。 

<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>
<body>


</body>
</html>
<script>
    //   var json = {left: 10, right: 10}  变异
    //json.left   json.top
    function scroll() {
        if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
        {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
        else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
          // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
        {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return { //  剩下的肯定是怪异模式的
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
//  使用这个函数
    window.onscroll = function() {
        console.log(scroll().top);
    }
</script>

作者:网络 来源:Surpass-on