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