Dynamisches Scollbardesign

Mit diesem kleinen JavaScript kann man einen kleinen Effekt
nur für den Internet Explorer erreichen. Hierbei ändert
sich die Farbe der Scollbar bei Mausberührung.

Selbst designte Scollbars sind schon etwas tolles. Mit einem kleinen
JavaScript kann man diesen Effekt noch ein wenig "aufmöbeln".
Hierbei ändert sich die Farbe des Scollbalken bei einer Mausberührung.

Hier gehts zu Demo…

<script language="javascript" type="text/javascript">
<!--
function scrollfun()
{
chk = document.body.clientWidth + 2;
if(window.event.x > chk)
{
var sfc = "blue"; //scrollbar-face-color
var ssc = "red"; //scrollbar-shadow-color
var shc = "green"; //scrollbar-highlight-color
var stc = "yellow"; //scrollbar-track-color
var sac = "black"; //scrollbar-arrow-color

document.body.style.scrollbarFaceColor = sfc;
document.body.style.scrollbarShadowColor = ssc;
document.body.style.scrollbarTrackColor = stc;
document.body.style.scrollbarHighlightColor = shc;
document.body.style.scrollbarArrowColor = sac;
}
else
{
var sfc = "orange"; //scrollbar-face-color
var ssc = "red"; //scrollbar-shadow-color
var shc = "white"; //scrollbar-highlight-color
var stc = "silver"; //scrollbar-track-color
var sac = "blue"; //scrollbar-arrow-color

document.body.style.scrollbarFaceColor = sfc;
document.body.style.scrollbarShadowColor = ssc;
document.body.style.scrollbarTrackColor = stc;
document.body.style.scrollbarHighlightColor = shc;
document.body.style.scrollbarArrowColor = sac;
}
}
// -->
</script>

Das Skript spricht über das "document" Objekt die
Style-Eigenschaft des Body-Tags an, und darüber die einzelnen
Farben für die Elemente der Scrollbar.
Wo die Farben definiert werden, ist anhand der Kommentare leicht
zu erkennen.
Das Skript muss explizit über den <body> Tag aufgerufen
werden.

<body onMousemove="scrollfun()">

This entry was posted in Javascript Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *