Styling scrollbar for google chrome browser

Question

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

Answer 1

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.

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

Answer 2

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: