infinite-scroll

Infinite Scroll is a JavaScript library for web pages that automatically loads and appends the next page of content as the user scrolls down, without the user needing to click a Next Page button. You attach it to any container element on your page, tell it where to find the URL for the next page, and tell it which elements from those pages to add to the container. From that point on, new content keeps appearing as the visitor scrolls.

Setting it up requires two pieces of information at minimum: the path pattern for subsequent pages and a selector that identifies which elements to append. The path can be specified as a URL template with a page number placeholder, as a CSS selector pointing to a next-page link already on the page, or as a JavaScript function that returns the URL dynamically. The library detects when there are no more pages by checking whether the next-page link still exists.

The library includes a number of optional behaviors. A prefill mode loads additional pages on startup until the page is long enough to fill the screen. A history mode updates the browser address bar as the user scrolls through pages, either replacing the current URL or adding new entries to the browser history. A button mode disables auto-loading and instead waits for the user to click a specific button before fetching the next page. There is also integration support for layout libraries like Masonry and Isotope so that newly appended items are placed correctly in grid layouts.

Infinite Scroll version 5 is released under the MIT License and is free to use in commercial and closed-source projects. It works in Chrome 60 and later, Edge 79 and later, Firefox 55 and later, and Safari 11 and later. It can be installed via npm or yarn, or loaded directly from a CDN with a script tag.