How to Check If a User Scrolled to the Bottom Using JavaScript

We want to detect if a user has scrolled to the bottom of a webpage using JavaScript if it has a lot of content or requires users to keep scrolling to view more information. With this, you can add the infinite scrolling feature to your page.

Implementing this feature can help enhance the user experience by allowing us to trigger certain events or load additional content when the user reaches the bottom of the page.

In this tutorial, we will explore how to check if a user has scrolled to the bottom of a page or an element using JavaScript. You will also get a step-by-step guide with sample code to implement this feature on your own website.

There are only 3 steps in JavaScript to check when users reach the bottom of a page or an element:

• Step 1: Find the amount of space users have scrolled.
• Step 2: Calculate the total scrollable height of the page.
• Step: 3: Compare both values to check whether the amount of space scrolled by a user is equal to the total scrollable height of the page.

Check If a User Scrolled to the Bottom of a Page Using JavaScript

To check whether a user has scrolled to the bottom of a page, first get the amount of space a user has scrolled from window.scrollY property. It is also very easy to get the total scrollable height of a page by substructing window.innerHeight from the document.documentElement.scrollHeight value.

Now compare these two values to confirm if a user has reached the bottom of a page or not. You need to listen to the scroll event to perform this operation.

Let's see an example.

          document.addEventListener('scroll', () => {
    const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight

    if (window.scrollY >= scrollableHeight) {
        console.log('User has scrolled to the bottom of the page!')
    }
})
        

I am listening to the scroll event on the document object. It triggers whenever the user scrolls on the page. Inside the event listener function, I will perform all the operations.

At first, you need to calculate the maximum height that the user can scroll to on the page by subtracting the height of the visible portion of the page (the window.innerHeight) from the total height of the page (the document.documentElement.scrollHeight).

Now you can compare the current vertical scroll position of the window (window.scrollY) to the scrollableHeight value. If the current scroll position is greater than or equal to the total scrollable height, then the user has scrolled to the bottom of the page.

Also Read: How to Get Screen Size/Browser Window Size With JavaScript

Check If a User Scrolled to the Bottom of an Element Using JavaScript

It is possible to detect whether a user has scrolled to the bottom of an element like div using JavaScript. It will also take the same 3 steps but with different properties.

To check whether a user has scrolled to the bottom of a section, get the amount of space scrolled from the scrollTop property. Calculate the total height a user can scroll in that section by substructing clientHeight from the scrollHeight value.

If the currently scrolled position is greater than or equal to the total scrollable height, then the user has reached the bottom of that particular section.

Let's explain it with an example.

          const box = document.getElementById('box')

box.addEventListener('scroll', (e) => {
    const scrollableHeight = box.scrollHeight - box.clientHeight

    if (box.scrollTop >= scrollableHeight) {
        console.log('User has scrolled to the bottom of this section!')
    }
})
        

I have an HTML div element with an ID of box and this element has a scrollbar. I am selecting that element and listening to the scroll event. Whenever a user scrolls, this event will fire.

You can calculate the maximum height that the user can scroll to in the box element by subtracting the height of the visible portion of the box element (the clientHeight) from the total height of the content within the box element (the scrollHeight).

Compare the current vertical scroll position of the box element (box.scrollTop) to the scrollableHeight value. If the current scroll position is greater than or equal to the maximum scrollable height, then the user has scrolled to the bottom of the box element.

Also Read: Ultimate Guide to Create Custom Scrollbars in CSS

Conclusion

Whenever you find that a user has reached the bottom of your page, you can do many things. Actually, you are allowed to do anything you want according to the requirements of your application.

Showing a "Back to top" button will give a better user experience. If users click this button, they will scroll back to the top of the page automatically.

As you can see, it has many use cases on a webpage. That's why we have covered the process of checking if a user has scrolled to the bottom of a page or a specific HTML element using JavaScript.