Automatically add next page
npm install infinite-scroll_Automatically add next page_
See infinite-scroll.com for complete docs and demos.
- infinite-scroll.pkgd.min.js minified, or
- infinite-scroll.pkgd.js un-minified
Link directly to Infinite Scroll files on unpkg.
`` html`
npm: npm install infinite-scroll
Yarn: yarn add infinite-scroll
Infinite Scroll v5 is licensed under the MIT License.
Whereas earlier versions of Infinite Scroll were previously dual licensed for commercial and closed-source usage, Infinite Scroll v5 licensing no longer has this distinction. You are free to use Infinite Scroll v5 in commercial and closed-source applications.
Infinite Scroll works on a container element with its child item elements
` html`
...
` js
let infScroll = new InfiniteScroll( '.container', {
// defaults listed
path: undefined,
// REQUIRED. Determines the URL for the next page
// Set to selector string to use the href of the next page's link
// path: '.pagination__next'
// Or set with {{#}} in place of the page number in the url
// path: '/blog/page/{{#}}'
// or set with function
// path: function() {
// return return '/articles/P' + ( ( this.loadCount + 1 ) * 10 );
// }
append: undefined,
// REQUIRED for appending content
// Appends selected elements from loaded page to the container
checkLastPage: true,
// Checks if page has path selector element
// Set to string if path is not set as selector string:
// checkLastPage: '.pagination__next'
prefill: false,
// Loads and appends pages on intialization until scroll requirement is met.
responseBody: 'text',
// Sets the method used on the response.
// Set to 'json' to load JSON.
domParseResponse: true,
// enables parsing response body into a DOM
// disable to load flat text
fetchOptions: undefined,
// sets custom settings for the fetch() request
// for setting headers, cors, or POST method
// can be set to an object, or a function that returns an object
outlayer: false,
// Integrates Masonry, Isotope or Packery
// Appended items will be added to the layout
scrollThreshold: 400,
// Sets the distance between the viewport to scroll area
// for scrollThreshold event to be triggered.
elementScroll: false,
// Sets scroller to an element for overflow element scrolling
loadOnScroll: true,
// Loads next page when scroll crosses over scrollThreshold
history: 'replace',
// Changes the browser history and URL.
// Set to 'push' to use history.pushState()
// to create new history entries for each page change.
historyTitle: true,
// Updates the window title. Requires history enabled.
hideNav: undefined,
// Hides navigation element
status: undefined,
// Displays status elements indicating state of page loading:
// .infinite-scroll-request, .infinite-scroll-load, .infinite-scroll-error
// status: '.page-load-status'
button: undefined,
// Enables a button to load pages on click
// button: '.load-next-button'
onInit: undefined,
// called on initialization
// useful for binding events on init
// onInit: function() {
// this.on( 'append', function() {...})
// }
debug: false,
// Logs events and state changes to the console.
})
`
Infinite Scroll v4 supports Chrome 60+, Edge 79+, Firefox 55+, Safari 11+.
For IE10 and Android 4 support, try Infinite Scroll v3.
This package is developed with Node.js v14 and npm v6. Manage Node and npm version with nvm.
` sh`
nvm use
Install dependencies
` sh`
npm install
Lint
` sh`
npm run lint
Run tests
` sh``
npm test
---
By Metafizzy 🌈🐻