Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Change color of scroll bar on website WordPress

  • SOLVED

Hello i need help changing the color of the scroll bar on my website. I would like to change color of the scrollbar to this -> background-color: rgb(235, 221, 62)

Here is an example of a site that has this same feature: http://themeforest.net/item/grafika-full-screen-portfolio-blog-theme/full_screen_preview/6821219

What can i do to achieve this?

Answers (3)

2014-04-01

Sai kumar answers:

Hi,

Would you like to change the entire scrollbar color? Then please copy paste the below code to your style.css


html{
overflow-y: auto;
background-color: transparent;
}

::-webkit-scrollbar {
width:15px; // width of the scrolpane

}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display:block;
background-color: #ccc; // color of scrollpane nav
}
::-webkit-scrollbar-track-piece {
background-color: #ccc; // color of scrollpane track
}
::-webkit-scrollbar-thumb:vertical {
height:60px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}


Hope this helps you.

Thanks
Sai


Sai kumar comments:

Hi,

To set the color mentioned by you, please change


::-webkit-scrollbar-thumb:vertical {

height:60px;

background-color: #666;

border: 1px solid #eee;

-webkit-border-radius: 6px;

}
<code>

to

<code>
::-webkit-scrollbar-thumb:vertical {
height:60px;
background-color: rgb(235, 221, 62);
}



This will change the existing scrollbar color. If you would like to implement it like the example (fading will not work with the given code), better you choose some jquery. Please update me your response, will help you.

Thanks
Sai


George Sprouse comments:

Hi Sia, that worked great! Thank you for going the extra mile and giving me the right code!

2014-04-01

Arnav Joy answers:

where is the scrollbar in your site ?show me your site


George Sprouse comments:

Hi, site is www.watchthefeed.com


Arnav Joy comments:

here are the few links which can be helpful to you

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

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

2014-04-01

Abdelhadi Touil answers:

Hi.
Here is the jQuery plugin used in that website (Theme) to change scroll bar color:

[[LINK href="http://areaaperta.com/nicescroll/"]]http://areaaperta.com/nicescroll/[[/LINK]]

Demo:

[[LINK href="http://areaaperta.com/nicescroll/demo.html"]]http://areaaperta.com/nicescroll/demo.html[[/LINK]]

Good luck.