Javascript/CSS Scrollbar Effects
The ability to change a visitors scrollbars actually uses CSS rather than javascript.
To change the scollbar's colours, copy and paste the script below into your webpage (in the <head> section), and change the colour values to suit your page:
<style type="text/css">
body {
scrollbar-arrow-color: #ffffff;
scrollbar-base-color:#ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3d-light-color: #ffffff;
}
</style>
It's worth remembering that this technique will only affect Internet Explorer, so a percentage of your visitors will never see your fancy scrollbars.
Related Tools
- Colour Picker to choose the colours for your scrollbars
- Colour Converter if you have colours in RGB format
26.03.2007. 15:48
Arik S. said on 22.05.2007. 19:29
can I change the scrollbar color in php?
Andy said on 22.05.2007. 23:11
The simple answer is no.
The reason is because PHP is a server side language. It only controls the output sent to the visitor. Or put another way, once the page has stopped loading, PHP stops.
Manipulating scrollbars is only possible with CSS. stylesheets can define the various colours of scrollbars.
The only way to manipulate scrollbars programmatically is with javascript - because it's a client-side language, which means that it can change things even after the page has started loading. By the same token, it can't alter the output sent to the user like PHP does.
So, if you want to do funky tricks with scrollbars, javascript is your only choice, because you can use javascript to manipulate CSS 'on the fly'.
Vid said on 07.07.2007. 20:41
Is it possible to use costum images for arrows? BTW thanks for this, it's just what I was looking for.
Andy said on 09.07.2007. 16:02
Unfortunately I don't think this is possible. To have a truly custom scrollbar you'd need to make one from scratch with javascript/DHTML. Check the link to javascript generated scrollbars in the article for some examples, including custom images for arrows.
lokesh said on 22.07.2007. 12:49
Before this i was using javascript from javascript.internet.com but it was too lengthy,now i am thrilled to get a single line code for my scroller,thanks for your code,as its in css i can easily handle this.
Ranganatm said on 02.08.2007. 12:21
Why does this stuff doesn't work in Mozilla firefox, it works only in IE
Andy said on 02.08.2007. 13:33
Mainly because some browser manufacturers feel that allowing website authors to change parts of the browser (scrollbars may fall into that category) is not acceptable. Both Opera and IE support it, the mozilla browser's don't
gondo said on 20.11.2007. 23:47
hi
i made my own scrollbar in javascript so it can look like you want.
check http://gondo.webdesigners.sk/javascript-scrollbar/
btw ff dosent support this css scrollbar styling at all and sometimes there are problems with this in some older bws.
try to set this css definition right to html and right to element you want to style scrollbar - it helps sometimes.
nihal said on 14.02.2008. 05:26
Nice article. thanks
rahulmax said on 19.06.2008. 22:41
Hi,
Nice article...
also, please note that its not scrollbar-dark-shadow-color, its scrollbar-darkshadow-color. No hyphen between dark and shadow. :D
Andy said on 21.06.2008. 15:32
@rahulmax: thanks for the correction :)
@kumar: I don't think this is possible
Recent Responses:
Page last (manually) updated: October 20, 2008.
Questions, comments, insults or praise? Have your say: