Nightly Procrastination Machine

    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published


    A modern infinite scrolling library


    • Leverages Intersection Observer API for performance
    • No dependencies
    • Lightweight
    • Event handlers for custom Scrollery events
    • Supports JSON and text/html response types



    <script src=""></script>
    <!-- or -->
    <script src=""></script>


    $ npm install scrollery



    <!-- Container -->
    <ul id="product-grid">
      <li class="product-card">...</li>
      <li class="product-card">...</li>
      <li class="product-card">...</li>
      <!-- Adds next page content here -->

    Initialize Scrollery

    const scrollery = Scrollery.create('#product-grid', {
      path: 'page',
      content: '.product-card'


    const productGridElement = document.querySelector('#product-grid');
    const scrollery = Scrollery.create(productGridElement, {
      path: 'page',
      content: '.product-card'


    Property Type Default Description
    path (required) string | function "" Determines the URL for the next page of content. The string value should be a the key of a search parameter. This will be used to determine the next URL to fetch content from. A function that returns the URL for the next page content can also be used.

    If "page" was passed as the value for path; scrollery will start fetching from .../?page=2. The value will automatically increment for the next page.
    content (required) string "" Selector to query the content from next page and append to container element.
    root Element null Element used as the viewport for checking visibility of the target. 1
    rootMargin string "200px" Margin around the root. 1
    threshold number | number[] 0 Number or an array of numbers which indicate at what percentage of the spinner's visibility to load more content. 1
    fetchOptions Object {} Options to apply for fetch request. 2
    responseType "text" | "json" "text" The type of response being returned from the server.
    If set to json, provide an event handler for the load.json event to populate data on a template. An example is given below.
    showSpinner boolean false Shows a spinner while waiting to load the content from the next page.


    Event Description
    load Triggered when the next content page has successfully fetched, but not inserted into DOM.
    load.json Triggered when the data returned from the next page is JSON.
    insert Triggered when the desired content is inserted into the DOM.
    last Triggered when there is no more content to fetch.
    // Attach an event handler for the load event
    scrollery.on('load', () => {
      console.log('Load event occured');
    // Remove event handler for load event'load');

    Example for JSON response

    Markup needs to be created and appended to the Scrollery container as shape of data will differ depending on the content. A templating library can help with this or the Document object.

     * data is a JavaScript object that is the result of
     * parsing the response body
    scrollery.on('load.json', (data) => {
      // Populate template with data
      const html = template.compile(data);
      // Append HTML to container

    Browser support

    Scrollery supports Chrome 51+, Edge 15+, Firefox 55+, Safari 12.1+. Internet Explorer is NOT supported.


    npm i scrollery

    DownloadsWeekly Downloads






    Unpacked Size

    27.9 kB

    Total Files


    Last publish


    • rayy-lo