js判斷dom元素滾動條到達底部的算法
示意圖

前置條件
Element.scrollHeight:Element是Element只讀屬性,是Element實際內容高度,包括溢出導致的視圖中不可見內容;
Element.scrollTop,scrollTop是Element可編輯屬性,表示滾動條可滾動的高度;
Element.getBoundingClientRect(),可以獲取Element的可視高度
打印后你會驚奇發(fā)現(xiàn):
Element.scrollHeight =?Element.scrollTop +?Element.getBoundingClientRect().height
這就是計算Element出現(xiàn)滾動條,且滾動到底部區(qū)域的關鍵關系。
按理論,元素滾動條滾動到底部判斷應該等于
實際開發(fā)中開發(fā)者都會刻意留小段底部區(qū)域,用于判斷滾動條到達底部的依據(jù),避免精確判斷后觸發(fā)概率較小的問題,比如下面這樣寫,可以提前80px知道,滾動條進入了底部區(qū)域。
為了減少滾動條觸發(fā)頻率,采用防抖技術
整合代碼如下
好了今天分享到這里,不清楚的小伙伴可以留言討論。