I am trying to listen to window.onscroll event to enable me do lazy loading of content in an app I am building primarily using tailwind CSS and Alpine.js, so far I have this 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>

Now the problem is, since my content is restricted to the height of the window, no onscroll events are being registered when i run:

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

I have also tried:

document.querySelector('['data-content']').onscroll = e => {
    console.log(e)
}

In this case, the onscroll event is registered and this brings us to a second problem. This time around, when I try to the following code which is supposed to let me know when the user has reached the end of the page so that I can fetch more content, scrollTop + clientHeight and scrollHeight remains the same from the beginning of the scroll to the end.

document.querySelector('['data-content']').onscroll = e => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
    console.log(scrollTop + clientHeight, scrollHeight);
};

I would realy appreciate any help or recommendations as I seem to have been stuck here for quite a while now.

EDIT The result is the same even when I use window.addEventListener('scroll')