无限 Ajax 滚动：如果最后，隐藏加载更多按钮的父容器

Question

. Answers to this question are eligible for a +50 reputation bounty. Freddy wants to to this question.

I'm using Infinite Ajax Scroll for pagination on my blog. When there are no more posts left to load, I want to hide the trigger (the buttons) parent container (currently, it just has opacity: 0 , but this leaves unwanted whitespace).

In the console, I can see that IAS leaves a message saying "No more pages left to load", so I know there is a method in place to check if more posts exist. But, having applied two methods, I cannot get it to work.

Method 1: Using last:function() Method 2: Checking if the trigger has opacity: 0 , then hiding parent container if so

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@webcreate/infinite-ajax-scroll@3.0.0-beta.6/dist/infinite-ajax-scroll.min.js"></script> <div class="container pagination-hide"> <div class="row"> <div class="col-12"> <div class="pagination"> <a class="loadmore">Load more</a> </div> </div> </div> </div> <script> $(function() { var ias = new InfiniteAjaxScroll('.insertPosts', { item: '.insertCard', pagination: '.blog-pagination', next: '.next-posts-link', trigger: '.loadmore', loadOnScroll: false, last:function(){ $(".pagination-hide").addClass("d-none"); } }); // $('.loadmore').click(function(){ // if ( $(this).css('opacity') == '0' ) { // console.log("true"); // $(this).parent(".pagination-hide").addClass("d-none"); // } // }); }); </script>

Have also tried the following, as per IAS docs , however, this just adds the d-none class to pagination-hide on page load, rather than adding the class (as it should) if there are no more posts to load.

 trigger: { element: '.loadmore', // this function is called when the button has to be hidden hide: function(element) { $(element).closest(".pagination-hide").addClass("d-none"); element.style.opacity = '0'; // default behaviour } },

Answer 1

Sorry, but you went on a bad road. You shoud show button <a class="loadmore">Load more</a> if you have some other conten unstead of hiding unnecessary. It's wrong in root. You are calling unnecessary operations in the DOM render. You better rewrite your code.

Answer 2

Seems like you would also need to add a show() method that un-does the changes in hide(), in order to get the correct behavior:

 trigger: { element: '.loadmore', // this function is called when the button has to be hidden hide: function(element) { $(element).closest(".pagination-hide").addClass("d-none"); element.style.opacity = '0'; // default behaviour }, show: function(element) { $(element).closest(".pagination-hide").removeClass("d-none"); element.style.opacity = '1'; } },

Answer 3

AFAICT you were on the right track with your first attempt - the last event seems like exaclty the right way to do what you need. But the docs also show that you need to bind event handlers with .on() , not pass them as options, which is what you tried.

For example, something like this:

var ias = new InfiniteAjaxScroll('.insertPosts', {
    // ... your options
    // last:function(){} // <-- won't work, not the way to bind event handlers
});

// What we want to happen when we've hit the last page
function noMorePages() {
    $(".pagination-hide").addClass("d-none");
}

// Handle the "last" event with our function
ias.on('last', noMorePages);

There is a similar example in the docs .

Answer 4

You simply need to provide show and hide functions for the trigger ref . The library calls the functions automatically on last event.
Demo website https://zyf5k.csb.app/
Codesandbox https://codesandbox.io/s/zen-volhard-zyf5k?file=/index.js
Code for ready reference:

window.ias = new InfiniteAjaxScroll(".container", {
  item: ".item",
  next: nextHandler,
  trigger: {
    element: ".loadmore",
    show: function (element) {
      element.parentElement.style.display = "block";
    },

    hide: function (element) {
      //hide desired element`
      element.parentElement.style.display = "none";
    }
  }
});

Note: Didn't realize @Kevin had already answered this. Posting the answer for extra info.