Skip to main content

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






Labels:

Comments

Post a Comment

Popular posts from this blog

VLC skins

It's been a while from my first blog post, so today I thought to make a blog post about skins in VLC player. I think you all are familiar with VLC player if not, here's the link for the website www.videolan.org/vlc/index.htm l In brief, VLC player is a free and opensource player that can play almost all the types of media formats. Even though it is a such a nice player, it looks kind of old and rusty, like the windows classic look. But you can make it prettier by just adding some new skins to it.  You can download skins for the player from here http://www.videolan.org/vlc/skins.php Then place the downloaded skin file (.vlt file) in the " skin " folder in the installation directory.           eg:- in windows:    C:\Program Files\VideoLAN\VLC\skins           or in linux systems:  ~/.local/share/vlc/skins Then, open the VLC player and go to the preferences. ...
2 comments
Read more

How to set terminal title in Ubuntu 18.04 LTS

In older Ubuntu versions, you could have just right-clicked on the Ubuntu Terminal window's title bar and set any title you would like. But unfortunately after Ubuntu 18.04 LTS this feature is gone. I used to love this feature because I'm multiple tabs in the single terminal window kind of a guy. I usually like to work in multiple named terminal tabs like below. By default, in newer Ubuntu version, it is showing just the current directory. Let's see how we can do this. Ubuntu prompt In ubuntu's Bash, there's an environment variable $PS1 which is responsible for the details that the command line prompts. You'll be able to echo this and see what's inside it. If I echo it it will print something like this. echo $PS1 \[\e]0;\u@\h: \w\a\]${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ If you really want to understand what this means, you can refer this page .  Updating the termina...
6 comments
Read more

Java, how to create a list with a single element

 I wanted to create a Java List with a single element. Yet, I wanted to add more elements later. So, I was looking for a couple of ways to do this. So far there are multiple elegant ways to create a list with a single element with a one-liner. Not so much for a modifiable list though. Here's what I gathered so far. Followings are a few ways of creating a list with strictly a single entry. Can't add more elements. 1. Collections.singletonList() This returns an immutable list that cannot be modified or add more elements. // An immutable list containing only the specified object. List<String> oneEntryList = Collections. singletonList ( "one" ) ; oneEntryList.add( "two" ) ; // throws UnsupportedOperationException 2.  Arrays.asList() This returns a fixed-size list consisting of the number of elements provided as arguments. The number of elements provided would be an array hence the size is fixed to the length of the array. // Returns a fixed-size list List...
Post a Comment
Read more