Search code examples
cssvue.jsvuetify.js

Is there a solution to style scrollbars globally?

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?

Solution

  • You can define a global.css/.scss file where 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:

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