@three11/infinite-scroll NPM

Infinite Scroll

A module for loading more items as you scroll the page down.

npm i @three11/infinite-scroll

yarn add @three11/infinite-scroll

First, import the module:

import InfiniteScroll from '@three11/infinite-scroll';

Then initialize a new instance of the module:

const infiniteScroll = new InfiniteScroll();

The default settings are:

Name	Type	Description	Default value
`element`	string	CSS selector for the items container	'.js-infinite'
`next`	string	CSS selector for the next page link	'.js-infinite__next'
`item`	string	CSS selector for the item which will be loaded	'.js-infinite__item'
`disabledClass`	string	Class name to add to the next page link	'disabled'
`hiddenClass`	string	Class name to add to the next page link	'hidden'
`responseType`	DOMParserSupportedType	Type of the AJAX response	'text/html'
`requestMethod`	'GET', 'POST', 'PUT', 'PATCH'	HTTP request type	'GET'
`viewportTriggerPoint`	number	Position in the viewport after which the loading will start	window.innerHeight / 2
`debounceTime`	number	Time to wait before triggering the next loading (in ms)	500
`onComplete`	function	A function to run after successful load	null