html
<div ref={e => (this.scroll = e)}></div>
js
componentDidMount() {
if (this.scroll) {
this.scroll.addEventListener("scroll", e => {
const { clientHeight, scrollHeight, scrollTop } = e.target;
// const { clientHeight, scrollHeight, scrollTop } = this.scroll;
const isBottom = scrollTop + clientHeight + 20 > scrollHeight;
console.log(scrollTop, clientHeight, scrollHeight, isBottom);
});
}
}
isBottom为true时滚动到底部,此时+20代表离底部20像素之内就判断为滚动到底部,继续加载数据
其他获取方式
const { clientHeight, scrollHeight, scrollTop } = this.scroll;
clientHeight 可视区域高度 (固定的)
scrollHeight 内容总高度 (固定的)
scrollTop 滚动条滚动的高度 (变化的)