Programmierung > HTML, CSS > Code Snippets > Scrollbar mit Style

14.07.2003

Nur mit IE 5.x möglich!

Mit Hilfe von CSS gelingt es, die Laufbalken (Scrollbars) des Browsers in das farbliche Layout der Website einzubeziehen. Dazu sind folgende Angaben in der CSS-Beschreibung des body möglich:

<style type="text/css">
body { 
	scrollbar-arrow-color: #FF0000;      /* rot */
	scrollbar-base-color: #FFFFFF;       /* weiß */
	scrollbar-track-color: #008000;      /* grün */
	scrollbar-face-color: #C0C0C0;       /* silber */
	scrollbar-highlight-color: #FFFF00;  /* gelb */
	scrollbar-3dlight-color: #000000;    /* schwarz */
	scrollbar-darkshadow-color: #800000; /* braun */
	scrollbar-shadow-color: #0000FF;     /* blau */
} 
	

Die Abbildung darunter zeigt die Auswirkungen der Farbangaben auf die einzelnen Teile des Laufbalkens. Wie zu sehen ist, wird die Angabe der scrollbar-base-color (weiß) von den danach folgenden Detailangaben überschrieben.

Die wesentlichen Angaben bei der Farbgestaltung des Laufbalkens sind scrollbar-arrow-color und scrollbar-base-color. Diesen beiden Angaben genügen üblicherweise, damit sich der Laufbalken optimal an das Layout der Website anpassen.

<style type="text/css">
body { 
	scrollbar-arrow-color: #000000; /* schwarz */
	scrollbar-base-color: #FF0000;  /* rot */
} 
</style> 	

Wünsche, Anregungen und Beschwerden bitte im Gästebuch deponieren.