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


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:

 

 

 

Produktives Beispiel

Veröffentlichen Sie ihre Kommentare ...