[JavaScript] Meldung wenn Seitenende erreicht wurde

Drucken
( 1 Vote )
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 erreicht
Folglich 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

 

 

 

Produktives Beispiel

  • Michel

    schrieb am 2013-06-20 08:15:15

    Funktioniert super!!!
    Danke

    Auf Kommentar antworten

  • 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

    • 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.

      sg

      Auf Kommentar antworten

      • Thomas

        schrieb 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 :-)

        Auf Kommentar antworten

Veröffentlichen Sie ihre Kommentare ...