repository·master·Indexed 27 days ago
https://github.com/metafizzy/infinite-scrollA JavaScript library (version 5.0.0) that automatically adds the next page of content to a container as the user scrolls. It supports custom pathing, response body types including JSON, and integration with Masonry, Isotope, or Packery via the outlayer option.
You can install Infinite Scroll using package managers or by linking directly to CDN files.
Package Managers
npm install infinite-scrollyarn add infinite-scrollCDN Link directly to the files on unpkg:
<script src="https://unpkg.com/infinite-scroll@5/dist/infinite-scroll.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/infinite-scroll@5/dist/infinite-scroll.pkgd.js"></script>npm install infinite-scrollThe InfiniteScroll constructor accepts an options object to customize behavior.
Required Options:
path: Determines the URL for the next page. Can be a selector string (e.g., '.pagination__next'), a string with {{#}} as a placeholder for the page number (e.g., '/blog/page/{{#}}'), or a function that returns the URL.append: A selector string that specifies which elements from the loaded page should be appended to the container.Key Configuration Options:
checkLastPage: (Boolean or String) Checks if the page has a path selector element. If path is a selector string, set this to the selector of the 'next' link.prefill: (Boolean) If true, loads and appends pages on initialization until the scroll requirement is met.responseBody: (String) Sets the method used on the response. Set to 'json' to load JSON.domParseResponse: (Boolean) Enables parsing the response body into a DOM. Disable to load flat text.fetchOptions: (Object or Function) Custom settings for the fetch() request (headers, CORS, POST method, etc.).outlayer: (Boolean) Integrates with Masonry, Isotope, or Packery so appended items are added to the layout.scrollThreshold: (Number) Distance between the viewport and scroll area to trigger the scrollThreshold event.elementScroll: (Boolean) Sets scroller to an element for overflow element scrolling.loadOnScroll: (Boolean) Loads next page when scroll crosses scrollThreshold.history: (String) Changes browser history and URL. Options: 'replace' (default) or 'push'.historyTitle: (Boolean) Updates the window title. Requires history to be enabled.hideNav: (Selector) Hides a navigation element.status: (Selector) Displays status elements indicating state: .infinite-scroll-request, .infinite-scroll-load, .infinite-scroll-error.button: (Selector) Enables a button to load pages on click.onInit: (Function) Called on initialization. Useful for binding events.debug: (Boolean) Logs events and state changes to the console.let infScroll = new InfiniteScroll( '.container', {
path: '.pagination__next',
append: '.post',
checkLastPage: true,
prefill: false,
responseBody: 'text',
domParseResponse: true,
fetchOptions: undefined,
outlayer: false,
scrollThreshold: 400,
elementScroll: false,
loadOnScroll: true,
history: 'replace',
historyTitle: true,
hideNav: undefined,
status: undefined,
button: undefined,
onInit: undefined,
debug: false,
});Infinite Scroll works by targeting a container element that holds child item elements. You initialize it by passing the container selector to the InfiniteScroll constructor.
HTML Structure Example:
<div class="container">
<article class="post">...</article>
<article class="post">...</article>
<article class="post">...</article>
...
</div>InfiniteScroll class, typically by targeting a container element and providing configuration options.