Custom ScrollView component

[tropicaaal]

Cross-browser scrollbar theming is enraging

• Webkit has pretty decent theming support, but ::-webkit-scrollbar also has a lot of limitations.
• Firefox has less to none customization, and pretty much only allows you to hide the scrollbar or change basic colors around.

To get around this, I want to design a custom ScrollView component, that still uses native scrolling but adds our own DOM-based scrollbar component to accurately replicate WinUI's ScrollViewer.

Considerations:

• Accessibility (of course)
• Progressive Enhancement - I want the native scrollbars to be visible when JS is disabled or before hydration.
• Performance - scroll events are weird sometimes
• Keyboard Navigation
• Component-level scrolling customizations (binding to scrollX/scrollY, etc...)

A good starting place would probably be looking at how https://www.radix-ui.com/docs/primitives/components/scroll-area does it.

[paperclover]

something I would like if this were to be added would be the ability to use the scrollbar itself as a component (give it a height + offset) where it doesn't have a scrollable content area. Is this something you'd consider, even as just an internal component to be used to make a more general ScrollView / Scroll Area component? (wait, is that what the last consideration means)

[tropicaaal]

something I would like if this were to be added would be the ability to use the scrollbar itself as a component (give it a height + offset) where it doesn't have a scrollable content area. Is this something you'd consider, even as just an internal component to be used to make a more general ScrollView / Scroll Area component? (wait, is that what the last consideration means)

ScrollBar would be an internal component I could export, yeah.