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