JS如何判断滚动条是否滚到底部

滚动条属性介绍

// scrollTop: 在Y轴上的滚动距离。
// clientHeight: 内容可视区域的高度。
// scrollHeight: 内容可视区域的高度加上溢出（滚动）的距离。
// 滚动条到达底部的条件是：scrollTop + clientHeight == scrollHeight。

滚动条位置判断代码

// 获取不同浏览器的scrollTop属性值
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// 获取不同浏览器的clientHeight属性值
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

// 获取不同浏览器的scrollHeight属性值
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

// 判断滚动条是否到达底部并且确保内容区域的实际高度大于可视高度
// 避免内容不足时重复触发加载操作
if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
  // 如果满足条件，则加载更多内容
  this.loadmore();
}