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

Question

HTML:

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

CSS:

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

The Content inside the div section is dynamic. How to detect the end of the scroll position so that the API call happens once it reaches the end and append it to the previous content similar to the demo example in https://www.npmjs.com/package/react-infinite-scroller ?But in the example it is happening for window scroll, which is not what I need. It should happen only for the div scroll.

Answer 1

If you want to try and do this yourself, you can attempt to do it like this. Attach a ref to the div in question, and then in your componentDidMount attach an event listener of scroll to the div. In the method where you handle the scroll event, you can get the div's scrollTop which you can then use to determine if more data should be requested. Of course this is just a basic idea, and will require some more detail to get it working, but it should get you started.

Here is some sample code.

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