JS如何判斷滾動條是否滾到底部

判斷滾動條到底部，需要用到DOM的三個屬性值，即scrollTop、clientHeight、scrollHeight。

 

scrollTop為滾動條在Y軸上的滾動距離。

 

clientHeight為內容可視區域的高度。

 

scrollHeight為內容可視區域的高度加上溢出（滾動）的距離。

 

從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。

 

代碼如下（兼容不同的瀏覽器）。

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

避免沒有數據的時候 重復執行 scrollHeight > clientHeight 

if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
  this.loadmore();
}