使用 React js 检测用户何时滚动到 div 底部

我有一个包含不同部分的网站。我正在使用segment.io 来跟踪页面上的不同操作。如何检测用户是否滚动到 div 底部？我已经尝试过以下操作，但它似乎是在我滚动页面时立即触发的，而不是在 我到达了 div 的底部。

componentDidMount() {
  document.addEventListener('scroll', this.trackScrolling);
}

trackScrolling = () => {
  const wrappedElement = document.getElementById('header');
  if (wrappedElement.scrollHeight - wrappedElement.scrollTop === wrappedElement.clientHeight) {
    console.log('header bottom reached');
    document.removeEventListener('scroll', this.trackScrolling);
  }
};

一种更简单的方法是滚动高度, 滚动顶部, and 客户高度.

从总可滚动高度中减去滚动高度。如果这等于可见区域，那么您已经到达底部！

element.scrollHeight - element.scrollTop === element.clientHeight

在react中，只需向可滚动元素添加一个onScroll监听器，然后使用event.target在回调中。

class Scrollable extends Component {

  handleScroll = (e) => {
    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    if (bottom) { ... }
  }

  render() {
    return (
      <ScrollableElement onScroll={this.handleScroll}>
        <OverflowingContent />
      </ScrollableElement>
    );
  }
}

我发现这更直观，因为它处理可滚动元素本身，而不是window，并且它遵循正常的 React 处理方式（不使用 ids，忽略 DOM 节点）。

您还可以操纵方程来触发页面上方（例如，延迟加载内容/无限滚动）。