MDN上概念

scrollTop:獲取或設(shè)置一個(gè)元素的內(nèi)容垂直滾動(dòng)的像素?cái)?shù)。

scrollHeight:一個(gè)元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見(jiàn)內(nèi)容。

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

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

css

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

html

<div class="box">
    <div>鳥(niǎo)語(yǔ)花香</div>
    <div>鳥(niǎo)語(yǔ)花香</div>
    ...
    <div>鳥(niǎo)語(yǔ)花香</div>
</div>

來(lái)看看scrollTop、scrollHeight與clientHeight都是多少

console.log("scrollTop:"+div.scrollTop)//頁(yè)面內(nèi)容的滾動(dòng)距離
console.log("scrollHeight:"+div.scrollHeight)//滾動(dòng)內(nèi)容的總大小
console.log("clientHeight:"+div.clientHeight)//滾動(dòng)容器的高

與magin的關(guān)系?css加上margin: 30px;
結(jié)果如下：

結(jié)論：沒(méi)關(guān)系

與padding的關(guān)系?css加上padding: 10px;
結(jié)果如下：

結(jié)論：有關(guān)系

scrollHeight=高度height(滾動(dòng)內(nèi)容)+上下padding

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

與border的關(guān)系?css加上border: 14px;
結(jié)果如下：

結(jié)論：沒(méi)關(guān)系

執(zhí)行oncroll：

var div = document.querySelector(".box")
var istan = true  //加個(gè)開(kāi)關(guān)，否則會(huì)append好多p標(biāo)簽
div.onscroll = function () {
    //距離底部300時(shí)執(zhí)行
    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%)'

如下圖：

判斷是否滾動(dòng)到底

element.scrollHeight等于element.scrollTop+element.clientHeight的時(shí)候說(shuō)明滾動(dòng)到底了

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

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

CSS hsl() 函數(shù)

hsl(hue, saturation, lightness)

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

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

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

實(shí)現(xiàn)效果

jq操作scroll

scrollLeft()

設(shè)置或返回匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移。

scrollTop()

設(shè)置或返回匹配元素相對(duì)滾動(dòng)條頂部的偏移。

總結(jié)

以上是生活随笔為你收集整理的scrollTop、scrollHeight与clientHeight的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。