HTML Tutorials - Scrollbar CSS style

being revised May 2006
Google site search

ContentsIntroductionBasicIntermediateAdvancedFuturePolicyInfrastructure
Many browsers now allow the specification of style attributes for the window scrollbar. This example gives the attributes generally available.
<style>
BODY {
    scrollbar-face-color:#75EA00;
    scrollbar-arrow-color:brown;
    scrollbar-track-color:#EEEEEE;
    scrollbar-shadow-color:'';
    scrollbar-highlight-color:'';
    scrollbar-3dlight-color:'';
    scrollbar-darkshadow-Color:'';
}
</style>
There does not appear to be any simple way to tie a scrollbar's colour scheme to that adopted for the webpage. A kind of theme inheritance would be handy.

Before changing the colour scheme of all your scrollbars give some thought as to what this does to a users desktop. A scrollbar of a webbrowser window typicaly serves a function in relation to the users desktop, somewhat like the title bar. It is a common way to access an obscured window. As such there is some virtue in it being clearly regonisable by having a colour scheme in common with other main window scrollbars. When you change this colour to something else it becomes harder for the user to find this window on the desktop.

You need to balance this practical functionality with the thematic sense of your webpage. Some websites use dark or black backgrounds, and in these the white and pale blue/grey scrollbar can look quite out of place. There is also the sense in which you may want your webpage to deliver a "total experience" typically for specially themed e-shops or entertainment pages.

©2000 - 2006 WEBSCOOL This page last updated 20 May 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.