No puedo hacer que este desplazamiento infinito de ajax funcione en una pantalla táctil o un teléfono celular móvil.
He estado tratando de calcular el tamaño de la pantalla con divs de encabezado, contenido y pie de página, pero nada funciona.
¿Cómo puedo activar una función cuando estoy en la parte inferior de la página?
Encontré algunos ejemplos aquí, pero ninguno de ellos funciona.
Esto es lo que tengo ahora mismo, trabajando en un escritorio.
Gracias,
<script> $(window).scroll(function() { if($(window).scrollTop() + $(window).height() >=$(document).height()) { var last_id = $(".trailerid:last").attr("id"); loadMore(last_id); } }); function loadMore(last_id){ $.ajax({ url: 'loadMore.inc.php?lastTrailerId=' + last_id, type: "get", beforeSend: function(){ $('.ajax-load').show(); } }).done(function(data){ $('.ajax-load').hide(); $("#trailerData").append(data); }).fail(function(jqXHR, ajaxOptions, thrownError){ alert('Servern svarar inte...'); }); } </script>Busque en la API Intersection Observer . Esta API está diseñada para detectar cada vez que ciertos elementos observados entran (y salen) de la ventana gráfica. Es una alternativa más eficaz que escuchar el evento de desplazamiento.
Con la API, puede colocar un elemento en la parte inferior de la página, llamemos a este elemento el activador . Cada vez que aparezca este activador, llame a la función loadMore y agregue elementos a la lista. El gatillo ahora debe empujarse hacia abajo y fuera de la vista nuevamente. Desplácese hacia abajo para repetir este proceso.
He hecho una demostración a continuación que usa esta técnica para simular un efecto de desplazamiento infinito . Funciona de la misma manera que se describió anteriormente.
const list = document.querySelector('.list'); const trigger = document.querySelector('.trigger'); const loadMore = () => { const item = document.createElement('div'); item.className = 'item'; list.append(item); } const handleIntersect = entries => { for (const { isIntersecting } of entries) { if (isIntersecting) { loadMore(); } } }; const options = { root: null, rootMargin: '0px', treshold: 0 } const observer = new IntersectionObserver(handleIntersect, options); observer.observe(trigger); body { margin: 0; padding: 0; counter-reset: item; } .item { display: grid; place-content: center; height: 200vh; width: 100vw; background-image: linear-gradient(0deg, transparent, black); } .item::before { counter-increment: item; content: counter(item); font-size: 32px; font-family: sans-serif; font-weight: bold; } <div class="list"> <div class="item"></div> </div> <div class="trigger"></div>