Click here to Skip to main content
15,434,792 members
Articles / Web Development / HTML
Article
Posted 4 Sep 2001

Stats

225.6K views
33 bookmarked

Manipulating scrollbar colors using CSS and JavaScript

Rate me:
Please Sign up or sign in to vote.
3.40/5 (9 votes)
4 Sep 2001
The thing about the default color of scrollbars is that they are dull and ugly. Wouldn't it be nice to change this color to better fit the overall theme of your site? See how to use Cascading Style sheets and JavaScript to do just that!

Introduction

The thing about the default color of scrollbars is that it's dull and ugly. Usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily Cascading Style sheets and JavaScript can be used to do just that!

Using CSS

In CSS, you would just add this code to the top of your page to customize the browser's scrollbar colors: The great thing about CSS is that browsers that don't understand it will just skip it, in this case, Netscape browsers.

HTML
<style>
<!--
BODY{
scrollbar-face-color:#8080FF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#DDDDFF;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
-->
</style>

Play around with the different values!

Using JavaScript

I can use JavaScript to dynamically change the scrollbar color. This is useful when I wish to do something more fancy, like alternating the scrollbar from one color to another. The code required is:

HTML
document.body.style.scrollbarFaceColor="colorname"
document.body.style.scrollbarArrowColor="colorname"
document.body.style.scrollbarTrackColor="colorname"
document.body.style.scrollbarShadowColor="colorname"
document.body.style.scrollbarHighlightColor="colorname"
document.body.style.scrollbar3dlightColor="colorname"
document.body.style.scrollbarDarkshadowColor="colorname"

A very good demonstration of this is a script written by Svetlin Staev, which changes the scrollbar colors when you move your mouse over and out of it: http://www.dynamicdrive.com/dynamicindex11/scrolleffect.htm

I'm seeing more and more sites customize the scrollbar color to blend in with the rest of their sites. Hope you find this tutorial useful in helping you do the same!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionThe scollbar references listed in CSS and Javascript are not found. Pin
ASPCoder77712-Jul-11 7:13
MemberASPCoder77712-Jul-11 7:13 
Questionis it working only for documents scroll bar ?? can i use for Panel scrollbar ?? Pin
NiravPatel148322-Aug-08 19:21
MemberNiravPatel148322-Aug-08 19:21 
GeneralGood job! Pin
joelperez7-Aug-08 9:27
Memberjoelperez7-Aug-08 9:27 
GeneralAbout Dreamweaver Pin
Anonymous14-May-05 0:47
MemberAnonymous14-May-05 0:47 
Generalin mozilla don&#180;t work Pin
Anonymous12-Mar-05 10:25
MemberAnonymous12-Mar-05 10:25 
Generalhide horizontal scrollbar Pin
Rayran6-May-04 7:12
sussRayran6-May-04 7:12 
GeneralRe: hide horizontal scrollbar Pin
Anonymous25-May-04 9:41
MemberAnonymous25-May-04 9:41 
Questiontutotial? Pin
Mark Focas31-Aug-03 12:47
MemberMark Focas31-Aug-03 12:47 
AnswerRe: tutotial? Pin
SagarNanivadekar1-Aug-08 1:09
MemberSagarNanivadekar1-Aug-08 1:09 
GeneralScrollbar width Pin
OnyxMax20-Jul-02 19:11
sussOnyxMax20-Jul-02 19:11 
GeneralRe: Scrollbar width Pin
Anonymous3-Dec-02 1:57
MemberAnonymous3-Dec-02 1:57 
GeneralCool ,Thanks... Pin
Josh Knox (disabled)20-Dec-01 19:03
MemberJosh Knox (disabled)20-Dec-01 19:03 
GeneralRequirements Pin
Philippe Lhoste11-Sep-01 4:49
MemberPhilippe Lhoste11-Sep-01 4:49 
GeneralRe: Requirements Pin
alex.barylski19-Apr-02 11:51
Memberalex.barylski19-Apr-02 11:51 
QuestionWhy? Pin
Ray Hayes5-Sep-01 1:14
MemberRay Hayes5-Sep-01 1:14 
AnswerRe: Why? Pin
5-Sep-01 8:51
suss5-Sep-01 8:51 
AnswerRe: Why? Pin
Paul Watson11-Feb-02 20:16
sitebuilderPaul Watson11-Feb-02 20:16 
AnswerRe: Why? Pin
Duc Truong21-Aug-02 13:43
MemberDuc Truong21-Aug-02 13:43 
GeneralRe: Why? Pin
Anonymous16-Jun-04 1:53
MemberAnonymous16-Jun-04 1:53 
AnswerRe: Why? Pin
Anonymous20-Oct-02 7:04
MemberAnonymous20-Oct-02 7:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.