Hi all,
I’m working in Ionic 5 at the moment. I have an Ion-list with, say, 10 equal height items. The list isn’t tall enough to show all 10 items at once - some will be offscreen at any one time.
Above the list I have a button that says “press here to see more items”, which basically scrolls up to see items above the first item in the currently viewable list.
Below the list I have a similar button that allows you to see items below the last viewable item (I. E. scroll down).
I want to activate/deactivate the buttons when it makes sense to scroll in that direction - for example if items 3-7 are visible, both buttons would be activated. If items 1-4 are visible, only the bottom scroll button would be visible. If 7-10 are visible, I’d activate the upper scroll button.
My question is, how can you find out which items are visible? The list’s css sets the overflow to scroll, but I can’t seem to figure out which items are currently visible. Neither Ion-list, nor ion-item seems to have a method to ask if that item is visible in the list (no isVisible() or similar).
I figure I’d call something in the scrollend method to set the buttons’ active/inactive state, but how can I inquire about which items are visible to determine which button(s) should be active/inactive?
Thanks!
Bret
