[scroll area] Style hover + active state

[oliviertassinari]

Summary

The native scrollbar has come a long way:

• scrollbar-color: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color (fallback to ::-webkit-scrollbar)
• scrollbar-width: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
• scrollbar-gutter: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter (reserve space to avoid layout shift)

is available in all browsers. Appearance can be animated to.

However, there still seem to be limitations with native scrollbar (could be content we add under https://base-ui.com/react/components/scroll-area to explain why this component exists in the first place when to use vs. using native CSS). I could find 4 (only?), by order:

1. Hover and Active states can't be styled: [css-scrollbars] Scrollbar Hover/Interaction Colors w3c/csswg-drafts#10591
2. macOS scrollbar is only visible on hover and doesn't work when the scrollbar is set to only become fully visible when scrolled [css-scrollbars] Force render scrollbar thumb of overlay scrollbars w3c/csswg-drafts#9785 (I'm not impacted by this).
3. It's impossible to have a scrollbar that takes no width/height on all platform, like it does on macOS by default with a native scrollbar
4. The scrollbar size can't be truly controlled, e.g. made bigger [css-scrollbars] Add thick value to scrollbar-width w3c/csswg-drafts#10650
5. Have the scrollbar with custom shapes are impossible (why is this needed anyway?).

Now, because we don't show 1. in the demo (nor in code) it makes me feel like this component has little purpose. How about we update the demo to showcase 1. is solved?

In practice, it seems that we need to change the component's implementation:

• hovering state isn't about when the scrollbar itself is hovered
• there is no active state

Benchmark

• https://ui.shadcn.com/docs/components/scroll-area does that wrong too.
• https://www.radix-ui.com/primitives/docs/components/scroll-area the demo seems broken.
• https://mantine.dev/core/scroll-area/ demonstrates the hover style. maybe the best demo so far I have seen
• Linear: it's not great:

Overall, I suspect that this component won't be needed in 2-3 years, the platform will fix this. So I don't know if we should spend time on this.