Estoy tratando de escuchar el evento window.onscroll para permitirme hacer una carga diferida de contenido en una aplicación que estoy creando principalmente usando Tailwind tailwind CSS y Alpine.js , hasta ahora tengo este 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"> <!-- Main content Goes here --> </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"> <!-- My Secondary navigation goes here--> </div> </div> </aside> </div> </div>

Ahora el problema es que, dado que mi contenido está restringido a la altura de la ventana, no se onscroll eventos de desplazamiento cuando ejecuto:

 window.onscroll = e => { console.log(e) }

También he probado:

 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. Esta vez, cuando intento con el siguiente código que se supone que me avisa cuando el usuario ha llegado al final de la página para que pueda obtener más contenido, scrollTop + clientHeight y scrollHeight siguen siendo los mismos 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); };

Realmente agradecería cualquier ayuda o recomendación, ya que parece que he estado atrapado aquí durante bastante tiempo.

EDITAR El resultado es el mismo incluso cuando uso window.addEventListener('scroll')