javascript - 使用 React JS 检测固定高度 div 的滚动结束

Question

HTML:

 <div  className={classes.StoryContentSection}>
          Content...
</div>

CSS:

.StoryContentSection {
    overflow-y: auto;
    height: 523px;
}

div 部分中的内容是动态的。如何检测滚动位置的末尾，以便在到达末尾时调用 API 并将其附加到与 https://www.npmjs.com/package/react-infinite-scroller 中的演示示例类似的先前内容中?但在示例中，它发生在窗口滚动时，这不是我需要的。它应该只发生在 div 滚动上。

Answer 1

如果你想自己尝试这样做，你可以尝试这样做。将 ref 附加到有问题的 div，然后在你的 componentDidMount 中将滚动事件监听器附加到 div。在处理滚动事件的方法中，您可以获得 div 的 scrollTop，然后可以使用它来确定是否应请求更多数据。当然，这只是一个基本想法，还需要更多细节才能使其发挥作用，但它应该能让您入门。

这是一些示例代码。

 componentDidMount() {
    this.div.addEventListener("scroll", this.handleScroll);
  }

  handleScroll = e => {
    console.log(this.div.scrollTop);
  };

  render() {
    const style = {
      height: 400,
      width: 400,
      overflow: "auto"
    };
    return (
      <div ref={div => (this.div = div)} style={style}>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>Hello</h1>
        <h1>world</h1>
        <h1>world</h1>
        <h1>world</h1>
        <h1>world</h1>
        <h1>world</h1>
      </div>
    );
  }