Infinite Scroll

Infinite Scroll is a JavaScript library that automatically loads and appends the next page of content when a user scrolls near the bottom of a container, or optionally when they click a button. It provides scroll-based pagination that fetches and inserts subsequent pages of content, with URL-driven content loading that determines next page URLs from selectors, templates, or custom functions.

The library integrates with browser history, updating the URL and history state as new pages load while preserving scroll position so each page state is bookmarkable and refreshable. It is compatible with Masonry, Isotope, and Packery layout libraries, automatically appending loaded items into visual grid layouts. Infinite Scroll also supports analytics tracking, sending pageview events to Google Analytics each time new content is loaded.

Additional capabilities include loading JSON content from API endpoints, rendering embedded elements like CodePens and Tweets after new content is appended, and displaying status indicators for request, last page, and error states during page loading. The library offers instance management for accessing, reconfiguring, or destroying an Infinite Scroll instance from a DOM element after initialization.

Features

Infinite Scrolling - Implements the infinite scrolling UX pattern that automatically loads content as the user scrolls.

Loading and Status Indicators - Shows status elements for request, last page, and error states during page loading.

History State Updates - Updates the browser URL and history state as new pages load, preserving scroll position.

DOM Content Appenders - Inserts selected elements from the loaded page into the container, with an option to disable appending for custom behavior.

Scroll-Based Resource Loading - Automatically fetches and appends the next page of content when the user scrolls near the bottom of the container.

Sequential Page Navigators - Updates the next page URL from the loaded page's content, enabling a chain of linked pages to be loaded automatically.

Loading - Provides a button that loads the next page on click with loading and last-page states.

Page Loading Buttons - Provides a button that loads the next page of content on click with loading and last-page states.

Scroll-Based Pagination - Fetches and inserts subsequent pages of content triggered by scroll position or button click.

Infinite Scroll Triggers - Automatically fetches and appends the next page of content when the user scrolls near the bottom of a container.

URL Update Scroll Preservers - Updates the URL as the user scrolls so that refreshing or returning to a page restores the exact scroll position.

History State Updaters - Updates the browser URL and history entries using replaceState or pushState as new content is loaded.

Automated Content Loading - Automatically fetches and appends the next page of content when the user scrolls near the bottom of a container.

Embedded Browser URL Loads - Changes the browser's URL and history entry to reflect the current page as new content is loaded.

Next Page URL Pattern Resolvers - Determines the URL for the next page using a selector, template string with placeholders, or custom function.

URL Pattern-Based Loading - Determines next page URLs from selectors, templates, or custom functions to load sequential content.

Browser History API Updates - Changes the page URL and browser history using replaceState or pushState as content is loaded.

Pattern-Based URL Rewriting - Determines the next page URL using a selector, template string with placeholders, or custom function.

Page Index Tracking - Reports the number of the currently loaded page, automatically determined from the path or URL.

Next Page URL Resolvers - Returns the relative or absolute URL path for the next page to be loaded.

Prefill Loaders - Loads and appends pages on initialization until the scroll requirement is met.

Scroll Loading Toggles - Enables or disables loading the next page when the user scrolls past the threshold.

Button-Triggered Page Loads - Provides a button-triggered mode for loading subsequent pages of content.

Manual Page Loaders - Triggers loading and appending the next page of content, returning a promise after items are appended.

Masonry Layouts - Works with Masonry, Isotope, and Packery to append new items into a visual grid layout.

Layout Library Integrations - Integrates with Masonry, Isotope, and Packery to append new items into visual grid layouts.

Masonry Layout Integrations - Automatically appends new items into Masonry, Isotope, or Packery visual grid layouts after page loads.

Layout Integration Utilities - Adds appended items to Masonry, Isotope, or Packery layouts automatically.

Last Page Detectors - Checks if the last page has been reached to prevent further requests and trigger a last event.

Scroll Trigger Distance Configurators - Configures the distance from the viewport to the scroll area that triggers loading the next page.

Analytics Tracking - Ships built-in pageview tracking to Google Analytics on each content load.

Pageview Tracking - Sends pageview events to Google Analytics each time new content is loaded via infinite scroll.

JSON APIs - Fetches JSON data from an API endpoint and appends returned items as the user scrolls.

Element Scrolling Utilities - Sets a specific element as the scroll container instead of the window for overflow scrolling.

metafizzyinfinite-scroll

Features

Star history