Ion Infinite Scroll Within Ion Scroll X & Y


#1

How do i prevent Ionic Infinite Loader from being triggered for just reaching the end of X, and trigger only when reaching the end of Y? I have a very wide datatable that requires Ion Scroll to display in both X and Y directions. The only problem is, Ionic Infinite Scroll kept getting triggered to load more data as it hits the end of Y coordinate.

Appreciate anyone who can point me in the right direction.


#2

The infinite scroll directive itself doesn’t allow you to do this. My suggestion would be to create a copy, call it infinite-scroller-y and strip out the behavior you don’t need/want. I did a similar thing for reverse infinite scrolling, only adding functionality to it. Not the cleanest solution, but I don’t really see another way.

The code you’re looking for is in infiniteScroll and infiniteScrollController.js. The parts you want to get rid of are both in the controller, L64 and L71-72 (for native and JS scrolling).


#3

hi fjansen,

would you mind sharing how you do the reverse infinite scrolling? it seems that there is still no official way to do it.


#4

Sure, I created a copy of the directive and controller, added the reverse attribute, and changed the calculation around. See the code for reverse infinite scrolling. Just include both files in your project, then use the <ion-infinite-scroll-reverse> directive with reverse="true".
One thing I noticed is that the scroll bar disappears when using reverse infinite scrolling. It’s not an issue for me, so I haven’t bothered to find out why it happens.


#5

thanks. will look into that.