farbige Scrollbar in bestimmten Bereichen

Status
Nicht offen für weitere Antworten.

Masterblazer

Mitglied
Ich möchte die Scrollbar nach meinen Wünschen definieren, farbig, etc. - wenn ich das ganze jedoch allgemein für die Webseite mache:

body {
...
}

wirkt sich das ja auf *alle* Scrollbars in der Seite aus. Nun möchte ich aber nur bestimmte Scrollbars "einfärben". Ich habe mir dazu wie oben im Body meine eingefärbte Scrollleiste definiert.
Nun habe ich mir gedacht das ich an den Stellen wo ich eine "Standard-Scrollbar" haben möchte, irgendwie eine "leere Scrollbarklasse" einbinde. Nur weiss ich nicht so recht wie ich da vorgehen soll. :-(
 
Hallo,

also mit Javascript geht das einwandfrei - sollte also auch mit CSS gehen (da muss ich's aber erst testen).

Code:
<html>
<head>
    <script type="text/javascript">
    function setScrollbar(){
        document.getElementById("1").style.scrollbarFaceColor="#333333";
        document.getElementById("1").style.scrollbarHighlightColor="#333333";
        document.getElementById("1").style.scrollbarShadowColor="#808080";
        document.getElementById("1").style.scrollbar3DLightColor="#808080";
        document.getElementById("1").style.scrollbarArrowColor="#FB5200";
        document.getElementById("1").style.scrollbarTrackColor="#000000";
        document.getElementById("1").style.scrollbarDarkshadowColor="#333333";
    }
    </script>
</head>
<body onload="setScrollbar()">
<div id="1" style="width:100px; height:200px; overflow:scroll; border:1px solid black;"></div>
<div id="2" style="width:100px; height:200px; overflow:scroll; border:1px solid black;"></div>
</body>
</html>

bye

//Edit: geht auch mit "normalem" CSS
Code:
<html>
<head>
<style>
    .scrollbar{ 
        SCROLLBAR-FACE-COLOR: #333333; 
        SCROLLBAR-HIGHLIGHT-COLOR: #333333; 
        SCROLLBAR-SHADOW-COLOR: #808080; 
        SCROLLBAR-3DLIGHT-COLOR: #808080; 
        SCROLLBAR-ARROW-COLOR: #FB5200; 
        SCROLLBAR-TRACK-COLOR: #000000; 
        SCROLLBAR-DARKSHADOW-COLOR: #333333;
    }
</style>
</head>
<body>
<div class="scrollbar" style="width:100px; height:200px; overflow:scroll; border:1px solid black;"></div>
<div style="width:100px; height:200px; overflow:scroll; border:1px solid black;"></div>
</body>
</html>

bye
 
Zuletzt bearbeitet:
Hi Andreas!

Danke für Deine reply, aber irgendwie scheine ich da etwas missverstanden zu haben. Ich möchte an diversen Stellen im Code eine *Standard*-Scrollbar, also z.B. die IE-default scrollbar - ansonsten soll aber das von mir definierte style für die scrollbar in der externen stylesheet-datei verwendet werden!

Anders ausgedrückt: wie bekomme ich die Werte für die STANDARD-Scrollbar?

greetz, Masterblazer
 
Original geschrieben von Masterblazer
Ich möchte an diversen Stellen im Code eine *Standard*-Scrollbar, also z.B. die IE-default scrollbar - ansonsten soll aber das von mir definierte style für die scrollbar in der externen stylesheet-datei verwendet werden!

Anders ausgedrückt: wie bekomme ich die Werte für die STANDARD-Scrollbar?

greetz, Masterblazer

Lass einfach die Scrollbar sachen aus dem body{} weg, und mach eine Scrollbar klasse, welche du den Elementen zuweist, die KEINE Standardscrollbars haben sollen. Ansonsten musst du einen Screenshot mit den Standard Scrollbar machen und die einzelnen Farbwerte mit einem Grafikprogramm rauslesen und zuweisen. Eine CSS Definition für "Standard" Scrollbars ist mir leider nicht bekannt :(

bye
 
Hey Andi..

Du hast recht ... ich werds dann wohl "anders rum" machen, also die Klasse einbinden wo ich das ganze dann "farbig" hinhaben will.

Danke Dir jedenfalls für Deine Mühen!

Gruss,

Masterblazer
 
Hab das auch mit CSS gemacht. Und jetzt hab ich ein kleines Problem:
Warum wird die farbige Scrollbar bei meinem Firefox nicht dargestellt (also es wird im nomalen Style dargestellt) und beim MS IE kann man meine selbst gemachte Scrollbar sehen?
Jonidas
 
Das ist so, weil das eine IE eigene Sache ist und nur wenige Browser dieses auch unterstützen. Mit Opera sieht man die farbigen Scrollbalken soweit ich weiss auch.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück