How to Detect When a User Has Scrolled to the Bottom of a Webpage?

Determining Browser Window Scroll Position

In web development, it is often necessary to detect whether a user has reached the bottom of a webpage. This allows for automatic content loading or other actions based on scroll position.

How to Detect End-of-Scroll

To determine if a user has scrolled to the bottom of a page, you can utilize the window.onscroll event listener. This event fires every time a user scrolls the page, allowing you to track scroll position in real-time.

The following JavaScript code snippet demonstrates how to detect the end of scroll:

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

This code calculates the current scroll height, which is the sum of the viewport height (determined by window.innerHeight) and the current scroll offset (calculated by Math.round(window.scrollY)). It then compares this value to the total height of the document, obtained using document.body.offsetHeight. If this calculated scroll height is greater than or equal to the document height, it indicates that the user is at or near the bottom of the page.

Demo

The code provided can be used in combination with the Element.scrollIntoView() method to automatically scroll a user to the bottom of an element when additional content is added.

For a real-world example of this functionality, please refer to the following demo:

[Demo Link]

By implementing this code, you can effectively track scroll position and perform desired actions, such as loading new content or altering page behavior, when users reach the bottom of a webpage.

The above is the detailed content of How to Detect When a User Has Scrolled to the Bottom of a Webpage?. For more information, please follow other related articles on the PHP Chinese website!