CODEWITHSUNDEEP
css
System-x32z
System-x32z

Reputation: 1971

Styling scrollbar for google chrome browser

I'm trying to share some knowledge by posting some css tricks questions(and jquery tricks in another topics) and answer it.
Here I'm dealing with styling the scrollbar for google chrome browser.

Upvotes: 13

Views: 18146

Answers (2)

Aman Deep
Aman Deep

Reputation: 187

Here is a simple example of a customized scrollbar using css

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Here is how it will look.

enter image description here

ref: https://css-tricks.com/custom-scrollbars-in-webkit/

Upvotes: 8

System-x32z
System-x32z

Reputation: 1971

Just add these CSS rules:

  1. ::-webkit-scrollbar
  2. ::-webkit-scrollbar-button
  3. ::-webkit-scrollbar-track
  4. ::-webkit-scrollbar-track-piece
  5. ::-webkit-scrollbar-thumb
  6. ::-webkit-scrollbar-corner
  7. ::-webkit-resizer

Here's what each rule does: enter image description here

Upvotes: 28

Related Questions