Automatisches scrollen

  • Der Rollbalken ist die Möglichkeit, eine Seite nach oben oder unten zu scrollen. Manchmal möchte man allerdings lieber (zusätzlich) einen sensitiven Bereich haben, der das Scrollen auslöst, wenn sich nur der Mauszeiger in diesem Bereich befindet. Das Skript implementiert eine zweistufige Scrollmöglichkeit, den Inhalt zu scrollen. Beides ist konfigurierbar. Im ersten Randbereich wird langsam gescrollt, ganz am Rand schnell. Das Beispiel ist so konfiguriert, dass von 5 bis 10 % des Randes langsam und von 0 bis 5 % schnell gescrollt wird. Die Geschwindigkeiten sind entsprechend gewählt - aber auch konfigurierbar. Bei manchen Browsern kann sogar gescrollt werden, wenn das Fenster gar keine Rollbalken hat. Eine kleine Einschränkung bleibt jedoch auf jeden Fall: Nicht jeder Browser hat einen nutzbaren Ereignishandler, um das Scrollen zu stoppen, wenn der Mauszeiger das Fenster verlässt. In diesem Fall wird einfach bis zum Ende weiter gescrollt und dann automatisch gestoppt. >JavaScript.< Die ersten Zeilen enthalten die Parameter. Hierbei bedeuten:

    • sense1: Die Sensibilitätszone, in der langsam gescrollt wird. Sie beginnt mit dem Wert von sense2 und endet bei sense1.
    • sense2: Der Bereich, in dem schnell gescrollt wird. Er beginnt bei 0 und endet bei sense1.
    • speed1: Die Schrittweite (Scrollgeschwindigkeit) in der Zone 1. Hier ist er auf 1 Pixel eingestellt. Die Zeit zwischen zwei Schritten bestimmt stime.
    • speed2: Die Schrittweite in der Zone 2, hier 5 Pixel.
    • stime: Die Zeit (in Millisekunden) zwischen zwei Schritten mit speed1 beziehungsweise speed2.

    <SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript"><!-- // Parameter var sense1 = 10 // Sensibilitaetszone 1 (in %) var sense2 = 5 // Sensibilitaetszone 2 (in %) var speed1 = 1 // Scrollgeschwindigkeit in Zone 1 var speed2 = 5 // Scrollgeschwindigkeit in Zone 2 var stime = 50 // Timer zum Scrollen// Interne Variablen var scrolling = false var scrollfast var richtung var y_mem = -1 var myWin // Scrolling anhalten function stopp_scrolling() { scrolling = false y_mem = -1}// Scroll aktivieren und durchfuehren function start_scrolling(initial){ if(!scrolling) return // Dokumentposition ermitteln var dy = (myWin.pageYOffset != null) ? myWin.pageYOffset : myWin.document.body.scrollTop if((y_mem != dy) && !initial) return var dx = (myWin.pageXOffset != null) ? myWin.pageXOffset : myWin.document.body.scrollLeft dy += richtung * (scrollfast ? speed2 : speed1) // Scrollen myWin.scrollTo(dx, dy) y_mem = dy // Funktion erneut aufrufen setTimeout("start_scrolling(false)", stime)}// Auswertung der Mausposition function zeige(e){ // Mausposition und Dokumentdaten var y = myWin.Event ? e.pageY : myWin.event.clientY if(myWin.Event) y -= - (myWin.pageYOffset != null) ? myWin.pageYOffset : myWin.document.body.scrollTop var wh = myWin.innerHeight ? myWin.innerHeight : myWin.document.body.clientHeight var dh = myWin.document.height ? myWin.document.height : myWin.document.body.scrollHeight // Zwischenvariablen var s1 = Math.round(wh * sense1 / 100) var s2 = Math.round(wh * sense2 / 100) var now_scroll // Scrollnotwendigkeit ermitteln if((y < s1) || (y > (wh - s1))) { now_scroll = true richtung = (y < s1) ? -1 : 1 scrollfast = ((y < s2) || (y > (wh - s2))) ? true : false } else { now_scroll = false scrolling = false } // Scrollstatus geaendert? if(now_scroll != scrolling) { y_mem = -1 scrolling = now_scroll if(scrolling) start_scrolling(true) }}// Mauskontrolle initiieren function init() myWin = window if(myWin.Event) myWin.document.captureEvents(Event.MOUSEMOVE) myWin.document.onmousemove = zeige}//--></SCRIPT>HTML.

    Das Scrollen beginnt automatisch. Jedoch muss ein Eventhandler installiert werden, wenn das Dokument komplett geladen ist. Dieser befindet sich in der Initialisierungsfunktion init(). Weiter können Eventhandler aktiviert werden, die ein Beenden des Scrollens zur Folge haben sollen. In diesem Beispiel ist der Eventhandler onBlur dafür vorgesehen. <BODY ... onLoad="init()" onBlur="stopp_scrolling()">