Is there a simple way to style scrollbars

Question

I want to add an "overflow:scroll" to a navigation div, but the default scrollbar on windows is hideous.

Is there no easy way to style the scrollbar without downloading additional javascrip libraries, APIs and such?

I think this link explains it pretty well: http://css-tricks.com/custom-scrollbars-in-webkit/ — Ovi Faur, Jan 20 '14 at 08:06
exact duplicate of [CSS customized scroll bar in div](http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div) — andyb, Jan 20 '14 at 08:07

score 2 · Answer 1 · answered Jan 20 '14 at 08:04

Here is an article that describes nicely CSS3 styling of the scrollbars in webkit browsers.

http://css-tricks.com/custom-scrollbars-in-webkit/

For a cross-browser solution you would have to resort to JS libraries like : http://jscrollpane.kelvinluck.com/

score 1 · Accepted Answer · answered Jan 20 '14 at 08:05

you can do something with webkit.

here are the main elements of a scrollbar

::-webkit-scrollbar             
::-webkit-scrollbar-button       
::-webkit-scrollbar-track      
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb       
::-webkit-scrollbar-corner       
::-webkit-resizer

and here are the states of a scrollbar

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

let's say:

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

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px #CCC; 
    border-radius: 5px;
}

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

hope it helps.

score 0 · Answer 3 · answered Jan 20 '14 at 08:03

Their are quite few ways if you need to support all browsers you should go for a plugin like Nicescroll

In the case that you think its irrelevant to support firefox then you can use these

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    margin: 10px;
    padding-bottom: 10px;
}
::-webkit-scrollbar-track {
    background: #E6E6E6;
    height:8px;
    width: 8px;
    border-radius: 8px;
    margin: 10px;
}

::-webkit-scrollbar-thumb {
    background: #aaa;
    height:8px;
    width: 8px;
    border-radius: 8px;
    cursor:pointer;
    margin: 10px;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #ccc; 
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* IE SPECIFIC */
body{
  scrollbar-base-color: #aaa;
  scrollbar-3dlight-color: #aaa;
  scrollbar-highlight-color: #aaa;
  scrollbar-track-color: #e6e6e6;
  scrollbar-arrow-color: #ccc;
  scrollbar-shadow-color: #aaa;
  scrollbar-dark-shadow-color: #aaa;
}

score 0 · Answer 4 · edited May 23 '17 at 11:49

0

Styling the scrollbar isn't standardized and therefore not cross-browser. That being said, they are supported in most browsers.

Take a look at this SO answer:

CSS customized scroll bar in div

edited May 23 '17 at 11:49

Community

1
1

answered Jan 20 '14 at 08:04

Lior

1,521
14
20

Is there a simple way to style scrollbars

4 Answers4