Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect scroll direction on web with inverted prop #1351

Open
1 of 3 tasks
biw opened this issue Sep 11, 2024 · 2 comments
Open
1 of 3 tasks

Incorrect scroll direction on web with inverted prop #1351

biw opened this issue Sep 11, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@biw
Copy link

biw commented Sep 11, 2024

Current behavior

The scroll direction is reverted. When using the scroll wheel going down moves the content up (were on every other webpage it goes down) and when using the scroll wheel going up moves the content down.

Expected behavior

The scroll direction is the same as other scroll bars on the web

I found a fix for generic divs https://codepen.io/anon/pen/pdrLEZ from https://stackoverflow.com/questions/18614301/keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up#comment80511192_44051405 but am having trouble refactoring flash-list to use it

To Reproduce

See example at https://codesandbox.io/p/sandbox/silly-taussig-gr5zfd

Platform:

  • iOS
  • Android
  • Web

Environment

1.7.1

I saw #558 but created a new ticket with a reproduction

@biw biw added the bug Something isn't working label Sep 11, 2024
@biw biw changed the title incorrect scroll direction on web with inverted prop Incorrect scroll direction on web with inverted prop Sep 11, 2024
@biw
Copy link
Author

biw commented Sep 11, 2024

I was able to hotpatch this one by disabling inverted and setting nativeID="chat-items" on FlashList and then setting a global CSS to

 #chat-items {
  flex-direction: column-reverse;
}

but it would be great to include this upstream. Will do some more investigation

@biw
Copy link
Author

biw commented Sep 14, 2024

After more testing, I found that although the first few items render with the above column-reverse fix, it does not scale past 20 items: https://codesandbox.io/p/sandbox/stoic-julien-dssghr

I'd love to help fix this if someone could point me in a relative direction! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant