Is it possible to automatically load a new page and remove the previous one when the user reaches the bottom of the page on a Webflow site, like in this example?

Yes, you can implement infinite scroll with automatic page loading in Webflow, but it requires custom JavaScript because Webflow does not have built-in support for this functionality. Here's how you can do it:

1. Prepare Your Webflow Pages

• Ensure that the content you want to load is structured consistently across pages.
• Use a CMS Collection List if you're pulling dynamic content from the Webflow CMS.

2. Add a Scroll Detection Script

• Place this script in Page Settings > Custom Code > Footer to trigger when the user reaches the bottom.

document.addEventListener("DOMContentLoaded", function () {    let page = 2; // Start from page 2    let loading = false;      window.addEventListener("scroll", function () {        if (loading) return;        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {            loading = true;            loadNextPage();        }    });    function loadNextPage() {        let nextPageUrl = window.location.pathname + "?page=" + page;        fetch(nextPageUrl)            .then(response => response.text())            .then(data => {                let parser = new DOMParser();                let doc = parser.parseFromString(data, "text/html");                let newContent = doc.querySelector(".collection-list"); // Adjust this selector to your structure                if (newContent) {                    document.querySelector(".collection-list").insertAdjacentHTML("beforeend", newContent.innerHTML);                    page++;                    loading = false;                }            })            .catch(() => (loading = false));    }});

3. Ensure Pagination is Enabled

• In Webflow, enable Pagination on your CMS Collection List.
• Webflow uses query parameters (?page=2, ?page=3, etc.), which the script references when fetching new content.

4. Test and Adjust

• Adjust the selector (.collection-list) to match your CMS collection wrapper.
• Modify scroll detection sensitivity (e.g., - 200 pixels) for smoother performance.

Summary

To implement automatic page loading in Webflow when the user scrolls to the bottom, you need JavaScript to detect scroll position and fetch the next CMS page dynamically. Ensure pagination is enabled, and test the setup to confirm smooth loading.