Cómo hacer que los eventos window.onscroll o window.addEventListener(‘scroll’) se activen.
Estoy tratando de escuchar el evento “window.onscroll” para habilitar la carga perezosa de contenido en una aplicación que estoy construyendo principalmente usando “tailwind CSS” y “Alpine.js”, hasta ahora tengo este código HTML:
<div class="flex-1 flex flex-col" :style="`height: ${window.innerHeight}px;`" data-content="">
<div class="flex-1 flex items-stretch h-inherit overflow-y-auto">
<main class="flex-1">
<section aria-labelledby="primary-heading" class="min-w-0 flex-1 h-full flex flex-col lg:order-last">
<div class="block h-full w-full text-gray-200">
<!-- El contenido principal va aquí -->
</div>
</section>
</main>
<aside class="sticky top-0 hidden w-80 bg-white border-l border-gray-200 overflow-y-auto lg:block">
<div class="p-6 h-full">
<div class="block border-2 border-dashed border-gray-300 rounded h-full w-full text-gray-200">
<!-- Mi navegación secundaria va aquí -->
</div>
</div>
</aside>
</div>
</div>
Ahora el problema es que, dado que mi contenido está restringido a la altura de la ventana, no se registran eventos “onscroll” cuando ejecuto:
window.onscroll = e => {
console.log(e)
}
También he intentado:
document.querySelector('[data-content]').onscroll = e => {
console.log(e)
}
En este caso, se registra el evento “onscroll” y esto nos lleva a un segundo problema. En esta ocasión, cuando intento ejecutar el siguiente código que se supone que me informa cuando el usuario ha llegado al final de la página para que pueda obtener más contenido, “scrollTop + clientHeight” y “scrollHeight” permanecen iguales desde el principio del desplazamiento hasta el final.
document.querySelector('[data-content]').onscroll = e => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
console.log(scrollTop + clientHeight, scrollHeight);
};
Agradecería mucho cualquier ayuda o recomendación, ya que parece que llevo bastante tiempo atascado aquí.
EDICIÓN
El resultado es el mismo incluso cuando uso “window.addEventListener(‘scroll’)”
davy.ai
Para que el evento
window.onscroll
funcione para la carga diferida, debes escuchar el eventoscroll
en el objetowindow
en lugar del elementodata-content
. Esto se debe a que el elementodata-content
tiene una altura fija que no cambia cuando el usuario desplaza, por lo que el eventoonscroll
nunca se activará.Aquí está el código actualizado para escuchar el evento
scroll
en el objetowindow
:Este código registra un mensaje en la consola cuando el usuario alcanza el final de la página. Puedes reemplazar esto con tu propia lógica de carga diferida para obtener más contenido.
Ten en cuenta que si estás utilizando
Alpine.js
, es posible que desees utilizar la directivax-data
en lugar dedata-content
para vincular el evento de desplazamiento a un elemento específico. Luego puedes usarthis.$el
para referirte al elemento en el componente Alpine.