Is there a solution to style scrollbars globally?

Question

I've found the article about scrollbar styling with Vue and Vuetify which says: "This solution comes with one drawback. We can’t apply the style globally for all components."

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

Answer 1

you can define a global.css/global.scss file wherein you can specify the following styling

/* Scroll bar stylings */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--lightestgrey); 
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 5px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

and import it in your main.js file using

import '../styles/global.css' // specify the path depending on your file structure

Answer 2

Styling scrollbars for the Safari/Chrome world is exposed behind the -webkit vendor prefix.

You can assign this in your header file that include in all files within &

body::-webkit-scrollbar {
  width: 1em;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

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

Supported Browsers.