Page scroll event inside a component

Ask us anything How do I?
1

I have a custom table component where I want to apply a “infinite scrolling” feature. So every time the user scrolls down and reach the “footer” element in my table, it will render more data (frontend pagination). I’m following the below guide but doing it inside a component:

My issue here is that the tutorial makes use of the the scroll event on the page level. However, I want to do this on a reusable component and I don’t want to have to apply a page level workflow every time I use this component.

Is there a way to detect if the “footer” part of my table component is visible on the page so that I may load more data when the user scrolls to the end of the table (all done within the component)?

2

There is no page in the component, thus there can’t be a page scroll event inside of a component. You might wanna look at the Watch scroll position of the items in Settings

3

That’s what I figured, I settled for a “Load more” button for now, and maybe look into a plugin for the scroll detection.