Re: Styling Scrollbars with CSS

From: Simon Fraser
Sent: Thursday, November 25, 2010 7:19 PM
To: Justin Kloth
Cc: www-style@w3.org
Subject: Re: Styling Scrollbars with CSS

On Oct 30, 2010, at 8:50 am, Justin Kloth wrote:


>>I'd just like to propose that some sort of specification be added to CSS 
>>(CSS3 if possible) for styling scrollbars, if that >>is at all possible. 
>>Sometimes the default scrollbars just look really out of place in certain 
>>web site designs.

>Note that WebKit already has this:
><http://webkit.org/blog/363/styling-scrollbars/>

Just for the note, in HTMLayout/Sciter I am using style sets for defining 
scrollbars:

@set  my-vertical-scrollbar
{
   .base { ... }
   .prev-line { ... }
   .prev-line:hover { ... }
   .prev-line:active { ... }
   .next-line { ... }
   .next-line:hover { ... }
   .next-line:active{ ... }
   .prev-page { ... }
   .next-page { ... }
   .slider { ... }
}
(names of classes are predefined)
After that you can define you scrollbars using special properties:

div {
   overflow: auto;
   vertical-scrollbar: my-vertical-scrollbar;
   horizontal-scrollbar: my-horizontal-scrollbar ;
}

Benefits of this approach:
1) we do not need bunch of new properties and pseudo-classes as in IE and 
WebKit cases.
2) it is possible to define scrollbars of different types and effects. E.g. 
the ones used on Mac or iPhone.


-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Friday, 26 November 2010 07:22:07 UTC