[Feature Request] add ScrollBar Component for better looks

[Reverier-Xu]

Is your feature request related to a problem? Please describe.

the default scrollbar on some browser is ugly:

Using CSS to customize the scrollbar style is one way to solve this, but the default scrollbars that take up the width of the content may cause some visual problems.

Describe the solution you'd like

I'd like something like this:

Scrollbars can automatically hide when not scrolling and float above the content when needed, without taking up a fixed width.

Describe alternatives you've considered

just like other component libraries do: https://www.naiveui.com/en-US/dark/components/scrollbar

Screenshots or Videos

No response

[rnwelsh]

The native scrollbars have pseudoclasses for styling, ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, etc. They're all non-standard though and a bit limited with what you can do.

As for the hiding effect, I just use overflow: overlayand set a transparent color on all scrollbar elements, and then do something like .scroll-parent:hover::-webkit-scrollbar-thumb {background-color: #069420;}
It's not perfect but it works

[Reverier-Xu]

The native scrollbars have pseudoclasses for styling, ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, etc. They're all non-standard though and a bit limited with what you can do.

As for the hiding effect, I just use overflow: overlayand set a transparent color on all scrollbar elements, and then do something like .scroll-parent:hover::-webkit-scrollbar-thumb {background-color: #069420;} It's not perfect but it works

Thank you! But the overflow: overlay is deprecated and not supported by all the browsers, such as Firefox. I think we still need something to do this.

At present , I am using OverlayScrollbars , it works well, but it is still a little troublesome when integrated with textarea.