A module for loading more items as you scroll the page down.
See a demo and the documentation.
npm i @three11/infinite-scrollor
yarn add @three11/infinite-scrollFirst, 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 |
This module offers full Typescript support out of the box.
GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007