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.


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


This module offers full Typescript support out of the box.


GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007

Go back

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • EON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image