添加滾動(dòng)條是在限定寬高且實(shí)現(xiàn)內(nèi)容溢出容器的情況下，添加? overflow : auto? 這個(gè)css屬性實(shí)現(xiàn)添加的，當(dāng)然默認(rèn)的滾動(dòng)條樣式可能并不符合實(shí)際的項(xiàng)目需求，可以通過(guò)更改屬性實(shí)現(xiàn)滾動(dòng)條樣式變化。

滾動(dòng)條實(shí)現(xiàn)（右側(cè)為實(shí)現(xiàn)樣式）

今天講在實(shí)際的應(yīng)用中，通過(guò)滾動(dòng)條實(shí)現(xiàn)內(nèi)容懶加載，當(dāng)頁(yè)面滾動(dòng)條上側(cè)（or 下側(cè)）到達(dá)容器頂部（or 底部），前端再次請(qǐng)求后端數(shù)據(jù)，實(shí)現(xiàn)頁(yè)面數(shù)據(jù)的懶加載。在開(kāi)始之前，先明白幾個(gè)基本的概念：scrollHeight,?clientHeight,?offsetHeight,?scrollTop。

scrollHeight: 在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總高度。

clientHeight: 元素內(nèi)容區(qū)高度加上上下內(nèi)邊距高度。

offsetHeight: 元素在垂直方向上占用的空間大小，包括元素的高度，水平滾動(dòng)條的高度，上邊框以及下邊框的高度。

scrollTop: 被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)，通過(guò)設(shè)置此值可以改變懶加載數(shù)據(jù)添加之后滾動(dòng)條的位置。??

1. 實(shí)際應(yīng)用如聊天紀(jì)錄等，滾動(dòng)條通過(guò)到達(dá)容器底部實(shí)現(xiàn)懶加載更新數(shù)據(jù)，此時(shí)只需判斷scrollTop的值是否為0即可判斷是否滾動(dòng)條到達(dá)頂部，代碼如下：

滾動(dòng)條實(shí)現(xiàn)懶加載&&滾動(dòng)條位置控制

2. 同時(shí)也有需求，是要通過(guò)實(shí)現(xiàn)滾動(dòng)條到底部完成數(shù)據(jù)請(qǐng)求，實(shí)現(xiàn)懶加載的。因?yàn)闈L動(dòng)條頭部距離容器頂部的距離scrollTop就是文本本身的高度減去容器的高度，所以判斷滾動(dòng)條到底部的條件就是：滾動(dòng)條頭部距離容器頂部的距離+元素在垂直方向上占用的空間大小 >= 元素內(nèi)容的總高度。代碼如下：

滾動(dòng)條實(shí)現(xiàn)懶加載

由于瀏覽器默認(rèn)行為，底部懶加載無(wú)須考慮加載數(shù)據(jù)之后的滾動(dòng)條位置~

next....