CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2559519
user2559519

Reputation:

Is there a simple way to style scrollbars

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?

Upvotes: 0

Views: 686

Answers (4)

Tudor-Radu Barbu
Tudor-Radu Barbu

Reputation: 494

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.

Upvotes: 1

Lior
Lior

Reputation: 1608

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

Upvotes: 0

Slavenko Miljic
Slavenko Miljic

Reputation: 3846

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/

Upvotes: 2

Simon Dragsbæk
Simon Dragsbæk

Reputation: 2399

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;
}

Upvotes: 0

Related Questions