Infinite Scroll works on desktop, breaks on mobile.

[compassmatt]

Desktop works as expected, however on mobile the loader is at the bottom and the scroll never triggers the next function. I also tested on just a smaller viewport, not a mobile impersonation and the same issue occurs. Any advice on how to fix?

[vj-abishek]

I'm also looking for a fix

[vj-abishek]

Here is an example https://codesandbox.io/s/peaceful-banzai-9sqfd

Test it on mobile. It works correctly on desktop but not on mobile

[vj-abishek]

Also check this one https://codesandbox.io/embed/adoring-dhawan-js373?file=/src/index.js&codemirror=1

Only reverse infinite scroll is not working. Normal infinite scroll is working

[vj-abishek]

Here is a quick fix fix

If you want to install this: npm i vj-abishek/react-infinite-scroll-component#mobile

The issue is, when we use flexDirection: 'column-reverse' . The scroll bar is set to the bottom. In desktop the scrollTop ends with 0 if it reaches the bottom. But it mobile scrollTop behaves oppositely due to flexDirection: 'column-reverse. The scrollTop starts from 0 at top in mobile.

In desktop scrollTop starts with 0 at bottom and end with element height at top (scrollTop goes negative) In mobile scrollTop starts with the element height at bottom and end with 0 at top(scrollTop goes positive)

[DanielBailey-web]

Mine works on mobile (emulated and android) but is breaking specifically on iOS devices... (both chrome and safari)

Unlike with your problem I am not using reverse.

[ShehzadaSalman]

So, I was facing a similar issue of data not being fetched on mobile, it worked for me by adding/increasing the threshold for mobile.

[retinfai]

Mine works on mobile (emulated and android) but is breaking specifically on iOS devices... (both chrome and safari)

Unlike with your problem I am not using reverse.

Same issue here