Web Scrollbar Behavior and Headers #10597
leggomuhgreggo
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Overview
Standard Web Scrollbar Behavior
Here's an example of the standard scrollbar behavior on web:
You can see that:
React Navigation Scrollbar Behavior
Here're a couple example cases demonstrating some issues with the current approach for web.
As you can see the nested scrolling context isn't fully coherent w/ the Header presentation -- and the result clashes a bit with the standard web scrolling idioms.
Packages
I haven't made an exhaustive investigation across all navigators + settings, but I believe this behavior is happening w/ Stack and Native Stack.
Related Discussions
I searched a good bit and couldn't find anything specifically related to this issue. Regrets if I've overlooked something.
Possible Solutions
Normally, I'd say the solution would be to have the Header render with a position relative to the inner boundary of the overflow container -- but, in this case I'm not sure that's possible, since the Scrollview would be user-defined within the Screen component, at a lower nesting level than React Navigation code that manages Headers.
Discussion
Option 1 would perhaps be the most "pure" with respect to web idioms, but it would seem to mean only having one scroll component for the entire app.
Option 2 (or something like it) seems like the most preferable of the three directions, but I could see that inviting other potential complexities.
Option 3 this is probably an example of what we don't want to do. But maybe it's less fragile than Im imagining.
I suspect there are other approaches than Im not considering. Would love to hear others' thoughts on the subject.
Thanks!
Note: This issue is most easily recognized if you update your scrollbar behavior to "Always"
Beta Was this translation helpful? Give feedback.
All reactions