Detect scroll reaches the bottom

Hi, today I will share with you how to detect when a user scrolls to the bottom.

Before diving into coding, it’s important to understand some necessary information for calculations:

• window.innerHeight: This is the height of the visible content.
• document.body.scrollHeight: This is the total height of the entire content, including both the visible and hidden parts.
• window.scrollY: Indicates the position that the user has scrolled to.

I will give you an example to understand it clearly:

Firstly, I initialize a source code using NextJS and Typescript, you can use other framework that you are familiar with.

Then I’ll add 3 <div>, each div is 500px height

So we got 1500px for the height of entire content

document.body.scrollHeight

I’ll resize the window height to 500px, then we’ll have this:

the innerHeight is the red box area, the outerHeight will include address bar and tab bar

Alright, those are document.body.scrollHeight and window.innerHeight

Now, we will check the scrollY

As you can see the video, when I enter the page at the first time, scrollY will be 0, because I haven’t scrolled yet, then I started to scroll the page, the scrollY value will change appropriately based on distance I have scrolled.

And when I scroll to the bottom, we got scrollY = scrollHeight - innerHeight.

Formula for

1const scrolledTo = window.scrollY + window.innerHeight
2const isReachBottom = document.body.scrollHeight === scrolledTo

Let’s try it!

1 useEffect(() => {
2    const onscroll = () => {
3      const scrolledTo = window.scrollY + window.innerHeight;
4      const isReachBottom = document.body.scrollHeight === scrolledTo;
5      if (isReachBottom) alert("reached bottom");
6    };
7    window.addEventListener("scroll", onscroll);
8    return () => {
9      window.removeEventListener("scroll", onscroll);
10    };
11  }, []);

Nice! it works!

But this is not a good practice if you use it at work for infinite scroll. You shouldn’t wait until the scroll reaches the bottom to make API call. This would result in a poor user experience. Instead, you should check when the scroll reaches the position away from the bottom a distance, for example, 300px from the bottom, and then trigger the API call and new content will be loaded and appended to document, it reduces waiting time for users.

So the formula will be:

1const scrolledTo = window.scrollY + window.innerHeight
2const threshold = 300
3const isReachBottom = document.body.scrollHeight - threshold === scrolledTo

It looks good, but we have a small issue here, if we use equality operator === , the isReachBottom will likely be false many times, because the scrollY will not constantly increase by 1 pixel every time user scrolls. It depends on how fast user scrolls.

To fix this issue, we need to use =< instead:

1const isReachBottom = document.body.scrollHeight - threshold <= scrolledTo

Alright, let’s test the new one:

Great, we made it!

That’s it for how to detect the scroll reaches bottom!

You can check my demo code at: https://github.com/alanng2050/medium-demo-scroll-to-bottom

Thanks for your reading!

Happy coding!