Home » DHTML » Article
Manipulate Scrollbar Colors Using CSS and JavaScript
|
| Article by: | Mike Thompson (1/6/2003) |
|
| Sponsored by: | FindMyHosting - Web Hosting Search |
| Summary: | 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!
|
|
| Viewed: 31857 times |
Rating (224 votes): |
|
1.6 out of 5 |
|
|
|
Manipulate Scrollbar Colors Using CSS and JavaScript
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, simply add the below definitions 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. Scrollbar painting is supported by IE5.5 and up.
Bet you never realized the scrollbar consisted of that many components! The first three definitions are the most important, as they correspond to the most visible aspects of the scrollbar. Feel free to play around with the other definitions to see what they affect.
Using JavaScript
You can also use JavaScript to dynamically change the scrollbar color. This is useful when you wish to do something fancy, like alternating the scrollbar from one color to another. The JavaScript translation of the scrollbar CSS definitions are:
Here's an example of a "blinking" scrollbar, which changes color every second:
A more elaborate example of scrollbar manipulation using JavaScript, called onMouseover Scrollbar Effect, is written by Svetlin Staev. This changes the scrollbar colors when you move your mouse over and away from it.
I'm seeing more and more sites customize the scrollbar color to blend in with the rest of their sites. I hope you find these tips useful in helping you do the same!
|
|
View highlighted Comments
 User Comments on 'Manipulate Scrollbar Colors Using CSS and JavaScript'
|
Posted by :
 Archive Import (o g) at 20:41 on Friday, January 10, 2003
|
worked really well... simple but cool.. thanks...
| |
|
Posted by :
Archive Import (ImNotReallyHere) at 18:49 on Tuesday, January 14, 2003
|
Simple coding yet very effective to the customizing of your site nice script Thank you
| |
|
Posted by :
Archive Import (Sarah) at 23:53 on Wednesday, February 12, 2003
|
I dunno,it looks cool but that blinking scrollbar really scews with my cursor, making the hour glass appear and dissapear... it is a little annoying actually
| |
|
Posted by :
Archive Import (William Philpot) at 09:07 on Saturday, June 07, 2003
|
Excellent script, thanks for offering if for free. It helped me much. Thanks, Bill Philpot.
| |
|
Posted by :
Archive Import (Fr0) at 16:38 on Sunday, June 08, 2003
|
Awesome script,
I like it...
thanks for posting it man!
Fr0
| |
|
|
|
Posted by :
Archive Import (BlckPanther) at 00:48 on Thursday, July 10, 2003
|
How or... where would i find a script that works like this one but instead of Colors, it changes the width on vertical and the height on horizontal scroll bars? please send word or code.
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| RELATED ARTICLES |
Creating CSS Buttons
by Thomas D. Greer
With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript. |
 |
DHTML Horizontal Scroller
by Premshree Pillai
Scroll text horizontally when the user hovers over a link. |
|
DHTML Javascript Ticker
by Premshree Pillai
This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature. |
|
Manipulate Scrollbar Colors Using CSS and JavaScript
by Mike Thompson
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!
|
|
Simple Thumbnail Browsing Solution
by Troy Wolf
This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets. |
|
DHTML News Bar
by Premshree Pillai
This is the News Bar script which displays a number of messages and rotates them using DHTML. |
|
DHTML Scrolling Image
by Premshree Pillai
Using this script the user can scroll an image left or right by clicking a buttong
|
|
DHTML Zoom In and Out Script
by Premshree Pillai
Using zoOom, you can zoom in and zoom out any image that is specified in the code.
|
|
Simple Mouse Trail using VB Script
by Jeff Anderson
With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch. |
|
Mouse Trail with Text
by Jeff Anderson
A Classic Mouse Trail Script, with configurable text, rather than images. We chose `I love you` for our text - what will you chose? |
|
| |
