React 判断滚动到底部

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 滚动条滚动的高度 (变化的)