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

HTML:

---

div部分中的内容是动态的。如何检测滚动的结束位置，以便API调用在到达结束位置时发生，并将其附加到之前的内容中，类似于中的演示示例？但在示例中，它发生在window scroll中，这不是我需要的。这应该只在div滚动时发生。

如果您想自己尝试这样做，您可以尝试这样做。将ref附加到相关div，然后在

组件didmount

中将scroll的事件侦听器附加到div。在处理scroll事件的方法中，可以获得div的

scrollTop

，然后可以使用它来确定是否应该请求更多数据。当然，这只是一个基本的想法，需要更多的细节来让它工作，但它应该让你开始

下面是一些示例代码

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

componentDidMount（）{
this.div.addEventListener（“滚动”，this.handleScroll）；
}
handleScroll=e=>{
console.log（this.div.scrollTop）；
};
render（）{
常量样式={
身高：400，
宽度：400，
溢出：“自动”
};
返回(
（this.div=div）}style={style}>
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
世界
世界
世界
世界
世界
);
}

您是否尝试过文档中的useWindow={false}选项？

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

 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>
    );
  }