fix: scrollTop issue on mobile in inverse mode

[vj-abishek]

Fixes #242

The issue is when we use flexDirection: 'column-reverse' . The scroll bar is set to the bottom. On 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 the top in mobile.

An example which breaks on mobile: Link (check on mobile)

An example which works on mobile Link (check on mobile)

[s-kris]

Thanks @vj-abishek
@ankeetmaini any plans to merge this fix?

[ankeetmaini]

Can a test be added for this fix? Will make it easier for me to merge

[vj-abishek]

It seems like browser issue. Before making this pull request I tested in brave browser and chrome. Both breaked. After some days I updated brave browser. Now when I test this. It is working in brave but breaking in chrome(current solution).

Mine solution(working in both browses) and current solution is also working (current solution is working only in brave).

I will test and say if it is worth to merge.

[vj-abishek]

Any please try to open those link and say if it works or breakes in mobile.

[s-kris]

Strangely, both of the links work in chrome android.

[s-kris]

This bug affects normal mode too. (not just inverse mode)

[vj-abishek]

@s-kris I got exams so only didn't have time to work on it.

[s-kris]

Hey @vj-abishek no explanation needed :)
Wish you the best!

[vj-abishek]

@s-kris it looks like browser issue on mobile. It seems they fixed it. I think it works in latest browsers. Only won't work in browsers which is not using latest version.

[s-kris]

I'm using default mode (not inverse mode). Just tested in chrome android (latest version), firefox + edge + chrome on macbook but as mobile mode using developer tools but still not working. Fetch more function is not called.

[vj-abishek]

After testing in mobile devices I came to one conclusion
This breaks in Chrome: 80.0.3987.99(android) or below
But works in Chrome: 88.0.4324.182(android)

And Normal scroll works correctly for me. If it is not working say me the chrome version, I will test it. It works in chrome 80 or above

And reverse scroll is breaking in chrome 80 or below(android), due to the above mentioned issue.

I don't know what to do for my app, If chrome version is 80 , it is working correctly(reverse scroll) due to my code . But it is chrome 88 It breaks. Some of the users updated chrome. And some didnt including me because there is some issue in updating chrome android. So infinite scroll not working for some users 😣

[jamalsoueidan]

@vj-abishek Any plans to merge this, it doesnt work on mobile when using column-reverse

[vj-abishek]

@jamalsoueidan This PR fixes issues related to Chrome Android version 80 and below.

Could you check with these two links?
Codesandbox (Mobile - Original package code)
Codesandbox (Mobile - With this current PR code)

I made a separate patch for my app using this method.
https://github.com/vj-abishek/airdrop/blob/master/package.json#L37

It looks like the package was inactive.

Also, could you check this PR regarding scrollThreshold?
#382

[jamalsoueidan]

@jamalsoueidan This PR fixes issues related to Chrome Android version 80 and below.

Could you check with these two links? Codesandbox (Mobile - Original package code) Codesandbox (Mobile - With this current PR code)

I made a separate patch for my app using this method. https://github.com/vj-abishek/airdrop/blob/master/package.json#L37

It looks like the package was inactive.

Also, could you check this PR regarding scrollThreshold? #382

Thank you very much for your prompt reply.

I ended with building a solution like this:
https://github.com/jamalsoueidan/whatsapp-superchat/blob/main/src/components/InfiniteScroll.tsx