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的值，並將這種方法進行封裝，方便調用，這樣就能夠快速處理不一樣瀏覽器中的兼容性問題，獲取咱們須要的值了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。