Infinite Scroll

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

See a demo and the documentation.

Install

npm i @three11/infinite-scroll

or

yarn add @three11/infinite-scroll

Usage

First, import the module:

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

Then initialize a new instance of the module:

const infiniteScroll = new InfiniteScroll();

Settings

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

Typescript

This module offers full Typescript support out of the box.

License

GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007