[JavaScript] Meldung wenn Seitenende erreicht wurde
Hauptkategorie: Programmieren
Kategorie: JavaScript
Erstellt am 11.04.2012
Zuletzt aktualisiert am 05.11.2012
Geschrieben von Jonny132
Von Social Networks wie z.B. Facebook kennt man die Funktion, dass wenn der Benutzer zum Seitenende hinscrollt z.B. neue Meldungen geladen werden.In diesem Tutorial zeige ich euch wie man ein 'Event' / Meldung bzw Aktion ausführen kann, wenn das Seitenende erreicht wurde.
Hier könnt ihr euch schonmal das Ergebnis ansehen.
Dazu brauchen wir Variablen die den aktuellen Status des Browserfensters beinhalten.
- totalHeight: Enthält die Höhe des Dokuments in Pixel, also die Höhe die es bräuchte den Inhalt anzuzeigen OHNE, dass Scrollbars benötigt werden.
- visibleHeight: Enthält die Höhe des Browserfensters in Pixel unabhängig vom Inhalt.
- currentScroll: Enhält den Abstand in Pixel zum Dokumentkopf der nichtmehr angezeigt wird.
- message: Enthält das Div-Element das die Ausgabe enthält, wenn das Seitenende erreicht wurde.
Wenn wir diese Variablen haben, können wir mit einer einfachen If-Abfrage herausfinden ob wir das Seitenende erreichthaben. Die Formel dazu lautet:
Wenn totalHeight Kleiner Gleich wie visibleHeight PLUS currentScroll Dann Seitenende erreichtFolglich brauchen wir nurnoch eine Funktion die uns diese Werte in einem gewissen Abstand immer wieder Auswertet und überprüft ob die Bedinung zutrifft.
Dazu verwenden wir in diesem Beispiel einen Timer mittels setInterval von einer Sekunde.
Hier das komplette funktionierende Beispiel:
<!DOCTYPE html>
<head>
<title>Scrollen Sie ans Ende</title>
</head>
<body style="height: 1200px;">
<div id="message" style="position:fixed; background-color:red;"></div>
<script>
setInterval(
function(){
var totalHeight, currentScroll, visibleHeight;
if (document.documentElement.scrollTop)
{
currentScroll = document.documentElement.scrollTop;
}
else
{
currentScroll = document.body.scrollTop;
}
totalHeight = document.body.offsetHeight;
visibleHeight = document.documentElement.clientHeight;
var message = document.getElementById('message');
if (totalHeight <= (visibleHeight + currentScroll))
{
if(message.innerText)
{
message.innerText = 'Seitenende erreicht';
}
else
{
message.textContent = 'Seitenende erreicht';
}
}
else
{
if(message.innerText)
{
message.innerText = '';
}
else
{
message.textContent = '';
}
}
},
1000);
</script>
</body>
</html>
Anmerkungen zum Code:
- <!DOCTYPE - Nötig für IE-Weiche
- if (document.documentElement.scrollTop) - Nötig für IE-Weiche
- if (message.innerText) - Nötig für FireFox-Weiche
Jonny132
schrieb am 2012-11-05 14:41:39
Hallo Thomas,
danke - FireFox braucht da wohl eine Weiche.
Hab den Code + das Tutorial angepasst und müsste jetzt funktionieren.
sgschrieb am 2012-11-05 15:04:04
Hi,
habe es jetzt mit allen Browser getestet und es funktioniert. Auch im Mozilla Firefox. Werde mir den Code mal speichern, kann man immer mal gebrauchen und ggf. noch modifizieren.
MFG :-)
Thomas
schrieb am 2012-11-04 14:07:23
Moin,
hab das grade mal ausprobiert, könnte nämlich nützlich sein. Allerdings funktioniert es nicht im Mozilla Firefox. In allen anderen (IE, Chrome, Opera) geht es.
MFG :)
Auf Kommentar antworten