In one of the Magento 2 project, we have added a load more button on the listing page.
So whenever the user clicks on the load more button, the next page of products will be shown.
You can use below on the custom listing page.
<script src ="https://infiniteajaxscroll.com/vendor/jquery-ias/dist/jquery-ias.min.js"></script>
<link src = "https://raw.githubusercontent.com/ravbetsky/infinite-ajax-scroll/master/dist/css/jquery.ias.css"/>
<script type="text/javascript">
var ias = jQuery.ias({
container: ".main",
item: ".products-grid",
pagination: ".toolbar .pages",
next: ".next"
});
ias.extension(new IASSpinnerExtension()); // shows a spinner (a.k.a. loader)
ias.extension(new IASTriggerExtension({offset: 1})); // shows a trigger after page 3
ias.extension(new IASNoneLeftExtension({
text: 'There are no more pages left to load.' // override text when no pages left
}));
</script>
You will also need to change class for this as shown below.
container: ".main", item: ".products-grid", pagination: ".toolbar .pages", next: ".next"
That’s it.

