scrollTop、scrollHeight與clientHeight

MDN上概念

scrollTop:獲取或設置一個元素的內容垂直滾動的像素數。

scrollHeight:一個元素內容高度的度量，包括由於溢出導致的視圖中不可見內容。

clientHeight:元素內部的高度(單位像素)，包含內邊距，但不包括水平滾動條、邊框和外邊距。

只看概念，似懂非懂，還是要自己測試一遍才知道，做個記錄，以下為谷歌瀏覽器測試。

css

.box {
        height: 500px;
        width: 300px;
        overflow: scroll;
        color: #fff;
    }

html

<div class="box">
    <div>鳥語花香</div>
    <div>鳥語花香</div>
    ...
    <div>鳥語花香</div>
</div>

來看看scrollTop、scrollHeight與clientHeight都是多少

console.log("scrollTop:"+div.scrollTop)//頁面內容的滾動距離
console.log("scrollHeight:"+div.scrollHeight)//滾動內容的總大小
console.log("clientHeight:"+div.clientHeight)//滾動容器的高

與magin的關系?css加上margin: 30px;
結果如下：

結論：沒關系

與padding的關系?css加上padding: 10px;
結果如下：

結論：有關系

scrollHeight=高度height(滾動內容)+上下padding

clientHeight=高度height(滾動容器)+上下padding

與border的關系?css加上border: 14px;
結果如下：

結論：沒關系

執行oncroll：

var div = document.querySelector(".box")
var istan = true  //加個開關，否則會append好多p標簽
div.onscroll = function () {
    //距離底部300時執行
    if (div.scrollHeight - div.scrollTop < div.clientHeight + 300) {
        if (istan) {
            var p = document.createElement("p")
            p.style.color = "#f40"
            p.innerText = '快到底了'
            div.appendChild(p)
            istan = false
        }
    }
    var hue = 360 - 360 * (div.scrollTop + div.clientHeight) / div.scrollHeight
    //改變背景顏色
    div.style.backgroundColor = 'hsl(' + hue + ',60%,70%)'

如下圖：

判斷是否滾動到底

element.scrollHeight等於element.scrollTop+element.clientHeight的時候說明滾動到底了

element.scrollHeight - element.scrollTop === element.clientHeight

注：快滑到最后的時候scrollHeight多了53，是添加的p標簽的高度(height+margin)

CSS hsl() 函數

hsl(hue, saturation, lightness)

hue 色相 0 (或 360) 為紅色, 120 為綠色, 240 為藍色

saturation 飽和度 色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數值

lightness 亮度 取0-100%，增加亮度，顏色會向白色變化；減少亮度，顏色會向黑色變化。

實現效果

jq操作scroll

scrollLeft()

設置或返回匹配元素相對滾動條左側的偏移。

scrollTop()

設置或返回匹配元素相對滾動條頂部的偏移。