Farbige Scrollbalken

womstar

Lounge-Member
hei!

Wer schon immer davon geträumt hat, farbige Scrollbalken auf seiner Seite einzusetzten. Dem wird hier jetzt geholfen.

Das ganze ist alles andere als "Javascript" sondern knallhartes CSS. Man kann es allerdings auch in "Javascript" in Verbindung mit CSS machen.

Hier der CSS-Code, der in den <head>....</head> eingebaut werden muss.

Code:
<head>
<style type=text/css>
body { 
scrollbar-face-color:00458C; // Farbe des Schiebebalkens + der Scroll up & down pfeile der der Scrollbalken
scrollbar-shadow-color:ff0000; // Die Farbe des Schattens der Scrollbalken
scrollbar-highlight-color:ffffff; // Die Lichtern (links) der Scrollbalken
scrollbar-3dlight-color:FFFFFF; // 3D effekt Farbe
scrollbar-darkshadow-color:000000; // Farbe den Schattens der ganz rechts ist
scrollbar-track-color:FFFFFF; // Farbe von der Laufleiste der Scrollbalken
scrollbar-arrow-color:FFFFFF; // Pfeilfarbe von den Scrollbalken
} 
</style>
</head>


Wer es aber unbedingt in "Javascript" machen möchte, kann das so tun:

Code:
<head>

<script language=javascript>
var face = "ff0000";
var shadow = "00458C";
var highlight = "cccccc";
var darkshadow = "00ffff";
var track = "ffffff";
var arrow = "ff0000";

function laufLeiste(){
document.body.style.scrollbarFaceColor = face; 
document.body.style.scrollbarShadowColor = shadow ;
document.body.style.scrollbarHighlightColor = highlight;
document.body.style.scrollbarDarkshadowColor = darkshadow;
document.body.style.scrollbarTrackColor = track;
document.body.style.scrollbarArrowColor = arrow;
}
window.onload=laufLeiste;
</script>
</head>

Ich denke es ist nicht schwer, die Farben nach seinem eigenen Geschmack zu ändern.

salü womstar
 
Zuletzt bearbeitet:
Hei ho,

kann den ein CSS in Javascript Umwandler auch meinen Traum erfüllen, und den Scrollbalken nicht mit einer Farbe färben, sondern mit einer beliebigen Hintergrund-gif? Das wär mal ne Klasse Sache.
 
neeeee das geht nich, noch nie was von gehört!
aber man kann die farben faden lassen, das ist auch schön.
 
Hi bine!
Teste doch mal meine exe in:
http://forum.jswelt.de/showthread.php?s=&threadid=10992
Dann bau ich Dir auch was, das ähnlich aussieht und funktioniert wie ein Bilder - Webscrollrahmen (ne frame - hp mit *.swf - Dateien), es sei denn, albu oder .colin machen das schneller als ich.
Hab wenig Zeit, aber in einer Woche müßte es fertig sein - okay? Vielleicht kann Robert das dann auch noch in javascript umwandeln, wenn Du Ihn darum bittest?
lg joachim
 
onmouseMove="scrollbar();"

hab ich gefunden.
ist nicht von mir.
dafür reichts noch nicht... :(

in den body-tag:
onmouseMove="scrollbar();"

der code:
function scrollbar()
{
posl = document.body.clientWidth + 2;
posr = document.body.clientWidth + 2 + 17;
if(window.event.x > posl && window.event.x < posr) //--> wenn Mauszeiger über der Scrollbar!
{
var sfc = '#4682B4'; //scrollbar-face-color
var sac = '#000000'; //scrollbar-arrow-color
var stc = '#4682B4'; //scrollbar-track-color
var s3c = '#000000'; //scrollbar-3dlight-color
var ssc = '#000000'; //scrollbar-shadow-color
var sdc = '#ffffff'; //scrollbar-darkshadow-color
var shc = '#4682B4'; //scrollbar-highlight-color
var sbc = '#4682B4'; //scrollbar-base-color

if(sfc > "") document.body.style.scrollbarFaceColor = sfc;
if(sac > "") document.body.style.scrollbarArrowColor = sac;
if(stc > "") document.body.style.scrollbarTrackColor = stc;
if(s3c > "") document.body.style.scrollbar3dLightColor = s3c;
if(ssc > "") document.body.style.scrollbarShadowColor = ssc;
if(sdc > "") document.body.style.scrollbarDarkshadowColor = sdc;
if(shc > "") document.body.style.scrollbarHighlightColor = shc;
if(sbc > "") document.body.style.scrollbarBaseColor = sbc;
}
else //--> wenn Mauszeiger nicht über der Scrollbar!
{
var sfc = '#4682B4'; //scrollbar-face-color
var sac = '#ffffff'; //scrollbar-arrow-color
var stc = '#4682B4'; //scrollbar-track-color
var s3c = '#ffffff'; //scrollbar-3dlight-color
var ssc = '#ffffff'; //scrollbar-shadow-color
var sdc = '#4682b4'; //scrollbar-darkshadow-color
var sdc = '#4682B4'; //scrollbar-highlight-color
var sbc = '#4682B4'; //scrollbar-base-color

if(sfc > "") document.body.style.scrollbarFaceColor = sfc;
if(sac > "") document.body.style.scrollbarArrowColor = sac;
if(stc > "") document.body.style.scrollbarTrackColor = stc;
if(s3c > "") document.body.style.scrollbar3dLightColor = s3c;
if(ssc > "") document.body.style.scrollbarShadowColor = ssc;
if(sdc > "") document.body.style.scrollbarDarkshadowColor = sdc;
if(shc > "") document.body.style.scrollbarHighlightColor = shc;
if(sbc > "") document.body.style.scrollbarBaseColor = sbc;
}
}
 
AW: onmouseMove="scrollbar();"

Und das alles läuft nur im IE am PC... :(

OT: Das sofortige Antworten geht am Mac nicht... Jetzt habe ich mich doch so daran gewöhnt...
 
Mein erster Post *freu wie doof*
Warum macht ihr das in JS... geht doch in CSS viel leichter :)

Code:
Body {
scrollbar-base-color: #0F3449;
scrollbar-track-color: #0F3449;
scrollbar-face-color: #0F3449;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #CCCCCC;
}

Cy@
 
Hallo!
Bekommt man die farbigen Scrollbalken auch in <iframes>?

Wenn möglich, bitte eine Antwort für Anfänger. Hab schon alle (meiner Meinung nach)
Möglichkeiten versucht
 
@Damaris
klar, in die datei die css-anweisung stecken, die du im iframe aufrufst.
oder du packst die anweisung auf die hauptseite, wo sich der iframe befindet.

bsp:

iframe {

scrollbar-base-color: #0F3449;
scrollbar-track-color: #0F3449;
scrollbar-face-color: #0F3449;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #CCCCCC;

}
 
Ja!
Sobald Du ein Style für die Scrollbar hast,
ist auch die Scrollbar in I-Frames betroffen,
wie auch in Formular-Textfeldern.
 
Danke für die schnelle Antwort!

Wohin gehört die Anweisung nun genau? Mein PC und ich sind schon am Ende. Erst habe ich es mit CSS versucht. Mache aber beim Eintrag in den Stylesheet irgendeinen Fehler.
 
In den Scrollbars ändert sich die Farbe, aber nur die vom Hauptfenster. Die Scrollbars in den Frames sind aber in der Standardeinstellung.
 
also entweder in die hauptdatei (*.html/*.php, etc.) oder in die seite die du im iframe aufrufst.

<html>
<head>
<style type="text/css">
iframe {

scrollbar-base-color: #0F3449;
scrollbar-track-color: #0F3449;
scrollbar-face-color: #0F3449;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #CCCCCC;

}
</style>
</head>
<body>
<iframe></iframe>
</body>
</html>
 
Zurück
Oben