Skip to content

three11/infinite-scroll

Repository files navigation

GitHub release GitHub issues GitHub last commit Build Status npm npm Analytics

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