Estoy usando Infinite Ajax Scroll para la paginación en mi blog. Cuando no queden más publicaciones para cargar, quiero ocultar el contenedor principal del trigger (los botones) (actualmente, solo tiene opacity: 0 , pero esto deja espacios en blanco no deseados).
En la consola, puedo ver que IAS deja un mensaje que dice "No quedan más páginas para cargar", por lo que sé que existe un método para verificar si existen más publicaciones. Pero, habiendo aplicado dos métodos, no puedo hacer que funcione.
Método 1: Usar last:function() Método 2: Verificar si el trigger tiene opacity: 0 , luego ocultar el contenedor principal si es así
<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> También probé lo siguiente, según los documentos de IAS , sin embargo, esto solo agrega la clase d-none a pagination-hide en la carga de la página, en lugar de agregar la clase (como debería) si no hay más publicaciones para cargar.
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 } },Parece que también necesitaría agregar un método show() que deshaga los cambios en hide(), para obtener el comportamiento correcto:
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'; } },Lo siento, pero fuiste por un mal camino. Debe mostrar el botón <a class="loadmore">Load more</a> si tiene algún otro contenido en lugar de ocultarlo innecesario. Está mal en la raíz. Está llamando a operaciones innecesarias en el renderizado DOM. Será mejor que reescribas tu código.
ASUNTO, estaba en el camino correcto con su primer intento: el last evento parece ser exactamente la forma correcta de hacer lo que necesita. Pero los documentos también muestran que debe vincular los controladores de eventos con .on() , no pasarlos como opciones, que es lo que intentó.
Por ejemplo, algo como esto:
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);