Is there a solution to style scrollbars globally

Question

I came across an article about decorating scrollbars with Vue and Vuetify that says: "There is one disadvantage to this technique. We can't apply the style to all components at once."

I wonder if there is a solution to style all scrollbars globally?

Answer 1

The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:

1. ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements

2. ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar

3. ::-webkit-scrollbar-track addresses the empty space “below” the progress bar

4. ::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)

5. ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element

6. ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet

7. ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements