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

[ScrollArea] Thumb causes conflict in scroll direction #896

Open
jjenzz opened this issue Oct 8, 2021 · 0 comments
Open

[ScrollArea] Thumb causes conflict in scroll direction #896

jjenzz opened this issue Oct 8, 2021 · 0 comments
Assignees
Labels
Difficulty: Easy This issue is quite easy Package: react/scroll-area Priority: Medium Medium priority issue Type: Bug Confirmed bug

Comments

@jjenzz
Copy link
Contributor

jjenzz commented Oct 8, 2021

On mobile, if you catch the thumb while scrolling the content area, the two interactions counteract each other (scroll on content tries to scroll down while thumb tries to scroll up) which causes unexpected UI issues.

We should probably prevent the scrollbar from accepting pointer events if the scroll was initiated from the content area, or only trigger thumb scroll via a long press on the thumb (iOS appears to do something like this for native scrollbars).

In the following video, I'm scrolling the content area while touching close to the scrollbar. It's easier to reproduce here because the thumb has a pseudo-element that makes its hit area larger:

Upload.from.GitHub.for.iOS.MOV
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Difficulty: Easy This issue is quite easy Package: react/scroll-area Priority: Medium Medium priority issue Type: Bug Confirmed bug
Projects
None yet
Development

No branches or pull requests

3 participants