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 )
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!