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();
}