Dez 17

Eigene Funktion zum Scrollen von div-Elementen

Tag: JavascriptPatrick @ 1:20 am

Mit übergroßen Inhalten hat man als Webmaster öfters mal zu tun. Dabei stellt man stets die Frage, wie man damit umgeht. Ich habe für dieses Problem eine div- und javascript-basierte Scroll-Funktion geschrieben, die es ermöglicht – ähnlich einem iframe – innerhalb des übergroßen Inhalts zu scrollen. Innerhalb des Inhalts ist ein Steuerkreuz zu sehen, dass im Ausgangszustand halbtransparent ist und erst beim Überfahren mit der Maus voll sichtbar wird. Das Steuerkreuz selbst ist eie Areamap.

Diese Funktion würde sich auch anbieten um einen Live-Ticker oder ähnliches zu realisieren.

Eine kleine Demonstration des Scriptes in Aktion kann man auf diesem Link hier sehen.

Wichtigster Bestand ist die Javascript-Funktion zum bewegen des Inhalts-div.

function moveDIV( var1, var2 ) {
	if ( var1 == 0 ) {
		document.getElementById("zeug").style.left = "0px";
		document.getElementById("zeug").style.top = "0px";
	} else {
		if ( var2 ) {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.left;
			var2 = Number(var2.substring(0, var2.length-2));
			var3 = document.getElementById("zeug").style.width;
			var3 = Number(var3.substring(0, var3.length-2));
			var4 = document.getElementById("tool").style.width;
			var4 = Number(var4.substring(0, var4.length-2));
			// wenn links am rand angekommen
			if ( var2 + var1 <= 0 ) {
				if ( var2 + var1 > -var3 + var4 ) {
					document.getElementById("zeug").style.left = var2 + var1 + "px";
				} else {
					document.getElementById("zeug").style.left = -var3 + var4 + "px";
				}
			}
		} else {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.top;
			var2 = Number(var2.substring(0, var2.length-2));
			// wenn links am rand angekommen
			if ( var2 + var1 <= 0 )	{
				document.getElementById("zeug").style.top = var2 + var1 + "px";
			}
		}
	}
}
&#91;/source&#93;

Diese Funktion unterscheidet, ob ein Benutzer vertikales oder horizontales Scrollen aktiviert hat. Aufgerufen wird die Funktion mittels folgenden Maus-Ereignissen, die die Scrollfuntion bei gedrückhalten der rechten Maustasten in 15 Millisekundentakt aufruft und dabei um jeweils 5px den Inhalt bewegt:

&#91;source language='javascript'&#93;
onmousedown="aktiv = window.setInterval('moveDIV(5, true)', 15); "
onmouseup="window.clearInterval(aktiv);
&#91;/source&#93;

Damit der Benutzer das Überfahren bemerkt, wird per Javascript der Mauszeiger verändert. Um einige Problemfälle auszuschließen und sicherzustellen, dass nur eine Intervallfunktion nur einmal ausgeführt wird, habe ich auch noch nachfolgende Eventhandler eingebaut:

&#91;source language='javascript'&#93;
onmouseover="this.style.cursor='pointer';"
onmouseout="if (aktiv) window.clearInterval(aktiv);
&#91;/source&#93;

Allgemein wird das div-Gerüst wie folgt eingebaut. An oberster Stelle wird das tool-div als Elternelement definiert.

&#91;source language='html'&#93;
<div id="tool" style="width: 500px; height: 200px; overflow: hidden; border: 1px solid gray; position: relative; ">

Anschließend wird das Menü eingebunden.

<div id="steuerung" style="position: absolute; top: 0px; left: 0px; margin-left: 420px; margin-top: 5px; z-index: 100; opacity: 0.2; filter: alpha(opacity=20); " onmouseover="fadeDIV(10); " onmouseout="fadeDIV(2); ">
<img src="kreuz.gif" alt="" usemap="#kreuz" border="0" />
<map name="kreuz">
<area shape="rect" coords="1,26,22,48" onmouseover="this.style.cursor='pointer';" onmousedown="aktiv = window.setInterval('moveDIV(5, true)', 15); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach links" title="nach links" />
<area shape="rect" coords="53,26,74,48" onmouseover="this.style.cursor='pointer';" onmousedown="if (aktiv) window.clearInterval(aktiv); aktiv = window.setInterval('moveDIV(-5, true)', 15); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach rechts" title="nach rechts" />
<area shape="rect" coords="28,1,47,22" onmouseover="this.style.cursor='pointer';" onmousedown="if (aktiv) window.clearInterval(aktiv); aktiv = window.setInterval('moveDIV(5, false)', 22); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach oben" title="nach oben" />
<area shape="rect" coords="28,52,47,74" onmouseover="this.style.cursor='pointer';" onmousedown="if (aktiv) window.clearInterval(aktiv); aktiv = window.setInterval('moveDIV(-5, false)', 22); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach unten" title="nach unten" />
<area shape="rect" coords="28,26,47,48" onmouseout="if (aktiv) window.clearInterval(aktiv); " onmouseover="this.style.cursor='pointer';" onclick="moveDIV(0)" alt="Ausgangsansicht" title="Ausgangsansicht" />
</map>
</div>

Danach wird noch das Kind-div mit dem Inhalt eingebettet und alle offenen divs werden geschlossen..

<div id="zeug" style="width: 1000px; margin-left: 0px; position: absolute; top: 0px; left: 0px;">
<-- INHALT -->
</div>
</div>

6 Antworten zu “Eigene Funktion zum Scrollen von div-Elementen”

  1. Jan sagt:

    Super Funktion! Wie kann man jetzt noch erreichen, dass das Scrollen nach unten begrenzt wird? Also dass man nur bis zum Ende des Inhalts (Textes) scrollen kann. Im Moment kann ja unendlich nach unten gescrollt werden.

  2. Erweiterung der div-Scroll-Funktion | Ajaxschmiede.de sagt:

    […] den Kommentar von Jan zu meinem Beitrag über die von mir geschriebene Funktion zum Scrollen mittels div-Elementen […]

  3. Glotze sagt:

    vielen vielen dank! dachte schon ich muss das ganze Template umbauen!

  4. steve_b sagt:

    super funktion. ich würde eine Hand bevorzugen die aussieht wie die in PDF Dokumenten – und mit der man in der lage ist den Inhalt zu „schieben“ – ganz so wie das auch bei google maps der Fall ist. Das gibt de User ei noch stärkeres Gefühl von „Kontrolle!“ Any Ideas?

  5. chris sagt:

    Ja. Gehe zur Schule und lerne die deutsche Sprache.

  6. PapaHarni sagt:

    Hallo zusammen,

    kann man daraus auch eine endlos schleife machen?
    Sprich wenn man am ende ist , dann kommt der anfang wieder und umgekehrt?

    M.f.G.
    PapaHarni

Hinterlasse einen Kommentar

You must be logged in to post a comment.