本文自出“阿敏其人”技術博客，轉載請取得本人同意。

文：阿敏其人

一、scroll團隊成員

scroll，滾動，一般討論的是網頁整體與瀏覽器之間的關係。

瀏覽器的的寬高是固定的，但是頁面的一般高度都遠遠大於瀏覽器的高度，有時候寬度也會大於瀏覽器的寬度。

Js中有一些系列的方法scroll的方法和屬性。

屬性/方法	解釋
element.scrollHeight	返回元素的整體高度。
element.scrollWidth	返回元素的整體寬度。
element.scrollLeft	返回元素左邊緣與視圖之間的距離。
element.scrollTop	返回元素上邊緣與視圖之間的距離。

這四個屬性，全部是隻讀屬性。

其中，無非就是分爲寬高和左上。
兩個方向。

image.png

準備工作

想要研究頁面滾動時，頁面和瀏覽器的之間的關係，那麼首先，我們應該擁有一個頁面滾動的監聽方法。

僞代碼

監聽方法{
    // scrollHeight
    // scrollTop
}

方向是沒錯的，但是過程是曲折的。

最簡單的監聽方法
window.onscroll = function() { 頁面滾動語句 }

但是，這樣是不行的，有兼容性問題。，在不同的瀏覽器下會有不同的監聽方法，所以我們應該先準備一個通用的方法，做好兼容工作。(萬惡的碎片化！！！)

具體的差異

谷歌瀏覽器和沒有聲明 DTD ：
document.body.scrollTop;
火狐和其他瀏覽器
document.documentElement.scrollTop;
ie9+ 和最新瀏覽器都認識
window.pageXOffset; pageYOffset （scrollTop）

==兼容的封裝方法==

兼容不同瀏覽器，返回Json格式的寬和高

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

二、scrollLeft 和 scrollTop

獲取scrollLeft 和 scrollTop。

根據封裝好的方法，我們在頁面上放置了一個 100*100 px的盒子。
進行一下滾動，基於可以在控制檯看到很多即時打印的數據。

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

        #div0{
            width: 100px;
            height: 100px;
            background: red;
        }

    </style>
</head>
<body>
<div id="div0"></div>
</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("top： "+scroll().top);
        console.log("left： "+scroll().left);
    }
</script>

.
.
效果

image.png

.
.

小結圖

image.png

.
.

三、 scrollHeight 和 scrollWidth

scrollHeight和scrollWidth類似，我們以scrollHeight爲例子。

使用scrollHeight和scrollWidth屬性返回元素的高度，單位爲px,包括padding
scrollHeight 和 scrollWidth返回的數值是包括當前不可見部分的。
scrollHeight 和 scrollWidth 屬性爲只讀屬性

栗子

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <style>

        #myD {
            margin-top: 10px;
            height: 200px;
            width: 250px;
            /*內容溢出設置*/
            overflow: auto;
        }
        /*一個內容高度遠比容器高度的例子*/
        #content {
            height: 500px;
            width: 1000px;
            padding: 10px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
<p>點擊以下按鈕，獲取id="content"的div元素的寬度和高度</p>
<button onclick="myFc()">按鈕</button>
<div id="myD">
    <div id="content">內容</div>
</div>
<p id="demo"></p>

<script>
    function myFc() {
        var elmnt = document.getElementById("content");
        var y = elmnt.scrollHeight;
        var x = elmnt.scrollWidth;
        document.getElementById("demo").innerHTML = "高度: " + y + "px<br>寬度: " + x + "px";
    }

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

.
.

結果：

image.png

小結圖

image.png

上面介紹的四個屬性，是從屬於元素的。

.
.

Element對象關於scroll的屬性小結圖

image.png

.
.

window對象的scrollBy() 和scrollTo()

scrollBy()和scrollTo()方法是從屬於window對象的。

scrollBy(x,y)

scrollBy(x,y)方法滾動當前window中顯示的文檔，x和y指定滾動的相對量。

scrollBy(0, 200) ==> 使得滾動條Y軸的位置，在當前的基礎上增加200。比如：當前Y軸位置爲0，執行後便是200；當前爲100，執行後便是300。

要使此方法工作 window 滾動條的可見屬性必須設置爲true！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script>
        function scrollWindow(){
            //x軸方向的的變化用得少
            window.scrollBy(100,100);
        }
    </script>
</head>
<body>

<input type="button" onclick="scrollWindow()" value="滾動條" />

<div style="width: 200px; height: 500px; background: darkcyan;font-size: 50px">001</div>
<div style="width: 200px; height: 500px; background: orange;font-size: 50px">002</div>
<div style="width: 200px; height: 500px; background: olivedrab;font-size: 50px">003</div>
<div style="width: 200px; height: 500px; background: aqua;font-size: 50px">004</div>
<div style="width: 200px; height: 500px; background: grey;font-size: 50px">005</div>

</body>
</html>

.
.
效果

image.png

scrollTo(x,y)

語法

scrollTo(xpos,ypos)

xpos 必需。要在窗口文檔顯示區左上角顯示的文檔的 x 座標。
ypos 必需。要在窗口文檔顯示區左上角顯示的文檔的 y 座標。

作用

scrollTo(x,y)方法：滾動當前window中顯示的文檔，讓文檔中由座標x和y指定的點位於顯示區域的左上角

scrollTo(0, 200) ==> 同scroll()方法,設置Y軸在200像素的位置。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script>
        function scrollWindow(){
            //x軸方向的的變化用得少
            window.scrollTo(0,1200);
        }
    </script>
</head>
<body>

<input type="button" onclick="scrollWindow()" value="滾動條" />

<div style="width: 200px; height: 500px; background: darkcyan;font-size: 50px">001</div>
<div style="width: 200px; height: 500px; background: orange;font-size: 50px">002</div>
<div style="width: 200px; height: 500px; background: olivedrab;font-size: 50px">003</div>
<div style="width: 200px; height: 500px; background: aqua;font-size: 50px">004</div>
<div style="width: 200px; height: 500px; background: grey;font-size: 50px">005</div>

</body>
</html>

.
.
效果：

image.png

相關：

JS offset系列簡明教程
 JS client系列簡明教程

本文完。

JS scroll系列簡明教程

一、scroll團隊成員

準備工作

具體的差異

==兼容的封裝方法==

二、scrollLeft 和 scrollTop

小結圖

三、 scrollHeight 和 scrollWidth

栗子

小結圖

Element對象關於scroll的屬性小結圖

window對象的scrollBy() 和scrollTo()

scrollBy(x,y)

scrollTo(x,y)

語法

作用

示例

前端使用 Konva 實現可視化設計器（13）- 折線 - 最優路徑應用【思路篇】

chrome新建tab標籤頁在當前標籤頁的右側打開，並且新建tab

Android Studio將Eclipse的項目作爲module的依賴庫

莫往Applicaotion存緩存/app被系統回收之後再打開發生了什麼

Android-Activity所應該瞭解的大概就這樣。（上）

自定義控件——初識自定義控件

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

JS scroll系列簡明教程

一、scroll團隊成員

準備工作

具體的差異

==兼容的封裝方法==

二、scrollLeft 和 scrollTop

小結圖

三、 scrollHeight 和 scrollWidth

栗子

小結圖

Element對象關於scroll的屬性 小結圖

window對象的scrollBy() 和scrollTo()

scrollBy(x,y)

scrollTo(x,y)

語法

作用

示例

Element對象關於scroll的屬性小結圖