How to detect page scroll to bottom of a React component

Depending on your UI framework, some of them don't really support scroll aware components. If you had to work on one of them, then this will be great for you.

I had to work with one of the old UI frameworks with ReactJs. It didn't support any scroll event awareness by default. So, I had to write some custom logic to do that.

Following is a sample component with scroll event awareness to detect the bottom.

class MyComponent extends React.Component {

   constructor(props) {
     super(props);
     
     //atBottom state is kept to smooth things out, 
     // to avoid again and again detecting the bottom event if we are at the bottom
     this.state = {atBottom: false};
     // This binding is necessary to make `this` work in the callback
     this.handleScroll = this.handleScroll.bind(this);
   }
 
   handleScroll(event) {
      console.log("scrolled");
      const element = document.getElementById('mylist');
      if (!this.state.atBottom && this.isBottom(element)) {
        this.setState({atBottom: true});
        alert("bottom reached");
      }
      if (!this.isBottom(element)) {
        this.setState({atBottom: false});
      }
   }
   
   componentDidMount() {
      document.addEventListener('scroll', this.handleScroll);
   }
   
   componentWillUnmount() {
      document.removeEventListener('scroll', this.handleScroll);
   }
   
   isBottom(element) {
      return element.getBoundingClientRect().bottom <= window.innerHeight;
   }
    
   
   render() {
      return (
         <div>
            <h1>My component</h1>
         </div>
      );
   }
 }
 
 ReactDOM.render(
   <MyComponent/>,
   document.getElementById('root')
 );
 

Here, I have used a custom event listener to identify the scroll event. I'm adding the listener to the document when the component is mounted. Also, it is mandatory to keep in mind to remove the listener when the component unmounted. Otherwise, during a page change, or a tab change the same event will be captured during other parts of the application as well.

Also, I've used a state to make sure the bottom detection is done smoothly. Otherwise, it will keep detecting the bottom even you are still at the bottom in the previous scroll.

If you see, in the constructor, I have bounded the "this" object into the handler method. If you don't do that, this at the handler method will refer to the document.

You can try this code in action with the following codepen URL.

https://codepen.io/thilinaj/pen/qBbmogo