Streaming live at 10am (PST)

Infinite Scrolling for Multiple Collection Lists

Hi there! I just came across this WF blog https://webflow.com/blog/infinite-scroll-tutorial

And the code works fine if only one collection list is on the page. Here’s the code I’m using:

<!-- Start Infinite Scroll -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
    <script>

    $.noConflict();

    jQuery(document).ready(function($){

    $('.infinite-scroll-list').infiniteScroll({     // selector for the CMS collection list
         path: '.w-pagination-next',     // selector for the paged navigation
         append: '.infinite-scroll-item',     // selector for all items you'll retrieve
         animate      : true,
         loadingText  : "", 
         maxPage:undefined,

         });
    });
    </script>
    <!-- End Infinite Scroll --> 

Problem is: I have multiple collections on a page as I am using tabs to display items in a Member Dashboard experience. What happens is the content goes on an infinite loop (pulls content from all collections on the page and ropes them in and loops them…well infinitely :grimacing:)

If you look on the Test page of the published site, you’ll see what I mean.

Read-only: Link

I’m not sure if it’s a class name issue or what (not a coder). Help is much appreciated!