【日常總結】scrollTop、scrollHeight與clientHeight的重要關系

前言

　　在做一個需求的時候涉及懶加載，百度了一下，發現scrollTop、scrollHeight與clientHeight這三個元素起到了重要作用，以前做過類似demo但是時間過太久忘記了，現在已經完全分不清這個三個屬性的區別，現在再重新復習一下

 

一、scrollTop

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

　　特點：1.未設置時默認為0

　　　　   2.為負值時不做任何響應

　　　　　3.設置為超出本身最大值時，默認為最大值

 

二、clientHeight

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

　   

三、scrollHeight

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

　　DEMO

       

 

四、scrollTop、scrollHeight與clientHeight的重要關系

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

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

 

五、應用

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

  

參考資料：

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