4

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?

Toni
  • 3,296
  • 2
  • 13
  • 34
  • 2
    See: https://stackoverflow.com/questions/7725652/css-scrollbar-style-cross-browser – JKD Jan 18 '21 at 14:59
  • 1
    I use this plugin for a cross browser solution: https://www.npmjs.com/package/jquery.scrollbar also allows me to only target desktop scrollbars if I want to – Pete Jan 18 '21 at 15:05

3 Answers3

9

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
Amaarockz
  • 4,348
  • 2
  • 9
  • 27
3

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.

enter image description here

Khurram Shaikh
  • 300
  • 2
  • 14
0

Accepted anwser might be good but it didn't worked well for me so I came up with another sollution:

You don't have to import anything in main.js.

By default index.html is in public folder so all you you need to do is to create file scrollbarStyle.css in this folder and add:

<link rel="stylesheet" href="<%= BASE_URL %>scrollbarStyle.css">

to your <head>...</head> in index.html and thats it! ;D

Enjoy your custom scrollbars across your app!

Ave
  • 31
  • 3