用getBoundClientRect檢測瀏覽器滾動到底部事件

不少時候好比下拉加載更多這種組件都須要檢測滾動到底部事件。通常咱們的作法是這個樣子，先獲取視窗高度window.innerHeight，而後獲取整個html文檔高度document.body.scrollHeight,再獲取滾動條捲上去的距離，document.body.scrollTop,若是滾動捲上去的距離大於等於整個文檔高度-視窗高度就說明滾動條到了底部。一圖勝千言！

就相似於咱們經過一個窗戶觀察一幅畫同樣，窗戶就是瀏覽器視窗，那幅畫就是html文檔。很明顯就能夠得出滾動到底部的判斷

//判斷是否滾動到底部
if(document.body.scrollTop>=document.body.scrollHeight - window.innerHeight){

//todosomething

}

---

上面這個方法比較麻煩還要處理瀏覽器兼容性。筆者無心中看到了一個getBoundClientRect()，這個方法比較新穎。下面和你們分享下：

用getBoundClientRect()判斷是否滾動到底部

getBoundClientRect()說明

這個方法由一個dom元素調用返回一個Object ClientRect對象，
該對象有六個屬性
left，top,bottom,right,height,width.
left dom左邊界距離視窗左邊距離，
top dom上邊界距離視窗上部距離，
right dom右邊界距離視窗左邊距離，
bottom dom下邊界距離視窗上部的距離，
height dom的高度，
width dom的寬度

實現檢測滾動到底部

對於html文檔中最底部的dom元素，假設變量名稱是dom

if(document.body.scrollTop>=dom.getBoundClientRect().top+dom.getBoundClientRect().height){
//doSomething
}

這樣就能夠實現滾動到底部的檢測，比上一種辦法簡潔多了。