scroll家族属性

时间 2019-11-12

标签 scroll 家族属性繁體版

原文原文链接

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

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

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

接下来，咱们先简单看一下相关属性。浏览器

例1：ui

<!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>

在谷歌浏览器下面，咱们会发现，虽然有滚动条，甚至在滚动时候，都没有打印值，那是由于咱们在滚动的时候是触发的滚动事件，因此咱们须要监听的是滚动事件。spa

所以，咱们将上面的代码稍做修改。将js部分改成下面的这样的。code

例2：htm

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

此时，咱们就能够监听到浏览器的滚动事件相应的值了，blog

封装scroll

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

咱们能够经过document.compatMode的值来判断是否处于标准模式，从而决定用什么方式获取相应的scroll值。ip

例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的值，并将这种方法进行封装，方便调用，这样就能够快速处理不一样浏览器中的兼容性问题，获取咱们须要的值了。