scroll家族属性

上一篇主要分析了一下offset家族属性，本篇文章则主要是来分析一下scroll家族属性。

首先，scroll家族包括4个属性：

网页正文宽度：document.body.scrollWidth;
网页正文高度：document.body.scrollHeight;
网页被卷去的高：document.body.scrollTop;
网页被卷去的左：document.body.scrollLeft;

接下来，我们先简单看一下相关属性。

例1：

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

console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);

</script>
</body>
</html>

在谷歌浏览器下面，我们会发现，虽然有滚动条，甚至在滚动时候，都没有打印值，那是因为我们在滚动的时候是触发的滚动事件，所以我们需要监听的是滚动事件。

因此，我们将上面的代码稍作修改。将js部分改为下面的这样的。

例2：

<script type="text/html">
    window.onscroll = function () {
        console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);
    }
</script>

此时，我们就可以监听到浏览器的滚动事件相应的值了，

封装scroll

其实，在实际运用过程中，为了处理不同浏览器的差距，我们用来表示scroll的值的方式有所不同，这需要从浏览器的模式说起。早期的浏览器在对css进行解析的时候，并未遵循W3C标准，这时的解析方式被称为怪异模式（quirks）,后来随着W3C的标准越来越重要，众多的浏览器开始遵循W3C标准解析css，此时我们称为严格模式（strict mode）。

我们可以通过document.compatMode的值来判断是否处于标准模式，从而决定用什么方式获取相应的scroll值。

例3：

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

<script>
    function scroll() {
        if(window.pageYOffset !== null){
            return {
                top: window.pageYOffset,
                left: window.pageXOffset
            }
        }else if(document.compatMode === "CSS1Compat"){ // W3C
            return {
                top: document.documentElement.scrollTop,
                left: document.documentElement.scrollLeft
            }
        }else{
            return {
                top: document.body.scrollTop,
                left: document.body.scrollLeft
            }
        }  
    }

    window.onscroll = function () {
        console.log(scroll().top);
    }
</script>
</body>
</html>

在上面的代码中，我们通过判断不同的模式使用不同的方法获取scroll的值，并将这种方法进行封装，方便调用，这样就可以快速处理不同浏览器中的兼容性问题，获取我们需要的值了。

posted on 2018-09-16 14:50 紅葉阅读(1530) 评论(0) 编辑收藏举报