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)
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!
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/
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.