【平常總結】scrollTop、scrollHeight與clientHeight的重要關係

前言

　　在作一個需求的時候涉及懶加載，百度了一下，發現scrollTop、scrollHeight與clientHeight這三個元素起到了重要做用，之前作過相似demo可是時間過過久忘記了，如今已經徹底分不清這個三個屬性的區別，如今再從新複習一下

 

1、scrollTop

　　定義：獲取或設置元素的內容向上滾動的像素值

　　特色：1.未設置時默認爲0

　　　　   2.爲負值時不作任何響應

　　　　　3.設置爲超出自己最大值時，默認爲最大值

 

2、clientHeight

　　定義：clientHeight = CSS height + CSS padding + 水平滾動條的高度

　   

3、scrollHeight

　　定義：只讀屬性是一個元素的所含的高度的測定，包括因爲溢出內容在屏幕上不可見的。

　　DEMO

       

 

4、scrollTop、scrollHeight與clientHeight的重要關係

　　關係公式：element.scrollHeight - element.scrollTop === element.clientHeight

　　解釋：此公式能夠用於判斷是否滾動到底

 

5、應用

　　這個公式我用於了數據的懶加載，在滾動到底部的時候請求接口獲取數據。

  

參考資料：

MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight