一直對ScrollTop帜乞、ScrollHeight、ClientHeight绪励、OffsetHeight這些內(nèi)容傻傻分不清楚，看了還會忘唠粥，今天寫觸底加載更多的時候又用到了疏魏，還是整理下來，捋清楚知識點比較好晤愧。
一蠢护、基本概念
1、偏移量 offset dimension**
描述：包括元素在屏幕上占用的所有可見的空
讀寫：只讀
offsetHeight:元素在垂直方向上占用的空間大小养涮，以像素計。包括元素的高度眉抬、(可見的)水平滾動條的高度贯吓、上邊框高度和下邊框高度。
offsetWidth:元素在水平方向上占用的空間大小蜀变，以像素計悄谐。包括元素的寬度、(可見的)垂直滾動條的寬度库北、左邊框?qū)挾群陀疫吙驅(qū)挾?/p>
offsetLeft:元素的左外邊框至包含元素的左內(nèi)邊框之間的像素距離爬舰。
offsetTop:元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離。
2寒瓦、客戶區(qū)大小 client dimension
描述：元素內(nèi)容及其內(nèi)邊距所占據(jù)空間大小
讀寫：只讀
clientWidth: 元素內(nèi)容區(qū)寬度加上左右內(nèi)邊距寬度
clientHeight: 元素內(nèi)容區(qū)高度加上左右內(nèi)邊距高度
客戶區(qū)的定義就是元素內(nèi)部的空間大小情屹，因此不包括滾動條占用的空間
要確定瀏覽器的視口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight
3杂腰、滾動大小 scroll dimension
描述：包含滾動內(nèi)容的元素大小
scrollHeight:在沒有滾動條的情況下垃你，元素內(nèi)容的總高度。 scrollWidth:在沒有滾動條的情況下，元素內(nèi)容的總寬度惜颇。 scrollLeft:被隱藏在內(nèi)容區(qū)域左側(cè)的像素數(shù)皆刺。通過設置這個屬性可以改變元素的滾動位置。
scrollTop:被隱藏在內(nèi)容區(qū)域上方的像素數(shù)凌摄。通過設置這個屬性可以改變元素的滾動位置羡蛾。
scrollWidth 和 scrollHeight 主要用于確定元素內(nèi)容的實際大小
二、加載更多
基于按鈕加載更多其實比較簡單锨亏，我們這里主要結(jié)合dom知識說說滾動加載更多
核心內(nèi)容有兩點：
1痴怨、給滾動元素增加事件監(jiān)聽
2、判斷ele.clientHeight+ele.scrollTop與ele.scrollHeight的大小就可以了
在簡書上發(fā)布相關文章是對自己不斷學習的激勵屯伞；如有什么寫得不對的地方腿箩，歡迎批評指正；給我點贊的都是小可愛^_^
