Ajaxschmiede.de

Durch den Kommentar von Jan zu meinem Beitrag über die von mir geschriebene Funktion zum Scrollen mittels div-Elementen angeregt, habe ich diese Funktion derart erweitert, dass nun auch eine Scroll-Begrenzung nach unten besteht. Damit ist das Problem des Endlos-Scrollens nach unten behoben.

Um die Höhe des div-Elements, in dem der anzuzeigende Inhalt steht, zu bestimmen, benutze ich die Javascript-Methode offsetHeight. Von dieser ermittelten Höhe ziehe ich die Höhe des Anzeigebereichs (tool-div) ab und erhalte damit den unteren Grenzwert beim Scrollen.

Der Code der erweiterten Funktion sieht nun wie folgt aus:

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)) + var1;
			
			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)) - var3;

			// wenn nicht am linken "rahmen" angekommen
			if ( var2 <= 0 ) {
				// wenn nicht am rechten "rahmen" angekommen
				if ( var2 >= var4 ) {
					document.getElementById("zeug").style.left = var2 + "px";
				} else {
					document.getElementById("zeug").style.left = var4 + "px";
				}
			} else {
				document.getElementById("zeug").style.left = "0px";
			}
		} else {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.top;
			var2 = Number(var2.substring(0, var2.length-2)) + var1;

			var3 = document.getElementById("zeug").offsetHeight;
			
			var4 = document.getElementById("tool").style.height;
			var4 = Number(var4.substring(0, var4.length-2)) - var3;

			// wenn nicht am oberen "rahmen" angekommen
			if ( var2 <= 0 ) {
				// wenn nicht am unteren "rahmen" angekommen
				if ( var2 >= var4 ) {
					document.getElementById("zeug").style.top = var2 + "px";
				} else {					
					document.getElementById("zeug").style.top = var4 + "px";
				}
			} else {
				document.getElementById("zeug").style.top = "0px";
			}
		}
	}
}

Das Script in Aktion kann auf dieser Demoseite angesehen werden.