Infinite scrolling for horizontal scroll

Hi guys,

I’ve just used Ionic to make some demo app, i want to show horizontal scroll has load more functionality , http://codepen.io/phuongphan/pen/xKump – what’s wrong with my code? I guess due to “distance”, how can i solve it? Thanks

I’m a little confused as to what exactly your issue is? Is it that the newly created item is pushed down about 20px?

ah sorry, i changed something before you saw it. My problem is ‘load more’ keep running all the time from page start. Thank for your concern!

Ahh I see, I didn’t see it in safari but I did on chrome. Hmm, that is really odd. It seems to only happen when you use the infinite scroll with ion-scroll, the problem persist. But if you remove the ion-scroll, it works as expected.

I’m going to open up an issue on this, thanks for pointing it out. I’ll report back as soon as I can.

thank you! but if I remove ion-scroll, i can’t use attribute ‘direction x’. Hope to receive your news soon.

Heye @phuongphan, a push has just ben committed to fix this issue. I tried it out on my codepen and it will load data until the content reaches the edge of the scroll-view

1 Like

excellent @mhartington! i begin to feel like ionic :smiley:
but worked so much with this infinite scroll, especially ‘horizontal’, i met many issues:

  • with ‘infinite’ how we can keep the latest position of scroll after we back?
  • with ‘horizontal scroll’ how we can prevent it with event swipe to right to reveal the left menu?( i used drag-content=“false” to disable event form menu)
    you can check it out here http://codepen.io/phuongphan/pen/iIncg/

@phuongphan @mhartington Has anyone gotten this to work in ionic 2? It seems that (ionInfinite) gets triggered only when vertically scrolled? I want it to scroll horizontally and event triggered when a specific threshold is reached

@VJA, @phuongphan, @mhartington you know how to fix infinite scroll when having multiple scrolling lists on one page? I woud like to load more per 10 when end is reached. Ofcourse in ionic2/3.

Hope you can help me.