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

Question

我有一个包含不同部分的网站。我正在使用 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);
  }
};

Answer 1

一个更简单的方法是使用 scrollHeight , scrollTop , 和 clientHeight .

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

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 做事方式(不使用 id，忽略 DOM 节点)。

您还可以操纵等式来触发页面更高的位置(例如，延迟加载内容/无限滚动)。