0.0.4 • Public • Published


    A little web component for infinite scrolling.

    Example codepen - Unsplash images
    Another example - Infinite memes

    Getting Started


    npm install infinite-scroll-component

    script tag

    <script type="module" src=""></script>


        <!-- Your content to infinite scroll goes here -->

    Additional Info

    • data-height - This attribute can be passed to customize the height of the infinite scroll container. The height provided can be any valid CSS height.
    • data-threshold - A number in the range 0 < x <= 1. The x or threshold chosen represents the amount of content that must be scrolled before initiating a fetch for more content. Say your threshold was 0.8. This would essentially represent that 80% of the content must be scrolled before a new fetch for more content is made.

    The above attributes can be used as shown below:

    <infinite-scroll data-height="300" data-threshold="0.8"></infinite-scroll>

    If a data-height is not provided then the scroll container will naturally grow as large as possible to hold the contained content.

    If a data-threshold is not provided, then the default will be 0.85 or 85% of content must be scrolled before a fetch event is fired.

    Speaking of fetch events. When a fetch event is initiated a custom DOM event will be emitted with the name infinite-scroll-fetch.

    In your code you can then handle this event by registering an event listener like shown below:

    function handleInfiniteScrollFetchRequest() {
        // fetch more content
        // add to infinite scroll container
    const infiniteScrollElem = document.querySelector('infinite-scroll');
    infiniteScrollElem.addEventListener('infinite-scroll-fetch', handleInfiniteScrollFetchRequest);


    npm i infinite-scroll-component

    DownloadsWeekly Downloads






    Unpacked Size

    24.3 kB

    Total Files


    Last publish


    • rcasto