globe: Prüfen ob Anzeigebereich nach unten gescrollt ist.

Beitrag lesen

SELF-Forum

Prüfen ob Anzeigebereich nach unten gescrollt ist.

globe Homepage des Autors
– Informationen zu den Bewertungsregeln

n'abend,

Nun soll folgendes geschehen: Wenn der Anzeigebereich nach ganz unten gescrollt ist, dann soll -sobald neue Daten geschrieben werden- per scrollTo(0, 9999); nach ganz unten gescrollt werden. Wenn aber jemand gerade einen Bereich liest der weiter oben steht, dann soll nicht automatisch gescrollt werden. Wie kann ich prüfen ob ganz nach unten gescrollt ist oder nicht?

ich habe vor einiger Zeit etwas passendes auf quirksmode.org (welche übrigens ihre vHosts reparieren wollen) gelesen. Die Quintessenz daraus:

function distanceToBottom()  
  {  
   var scrollPosition;  
   var viewportHeight;  
   var documentHeight;  
  
   /*  
    * VERTICAL SCROLL POSITION  
    */  
  
   if(window.pageYOffset)  
    scrollPosition = window.pageYOffset;  
  
   // Explorer 6 Strict  
   else if(document.documentElement && document.documentElement.scrollTop)  
    scrollPosition = document.documentElement.scrollTop;  
  
   // all other Explorers  
   else if(document.body)  
    scrollPosition = document.body.scrollTop;  
  
   /*  
    * DOCUMENT HEIGHT  
    */  
  
   if (window.innerHeight && window.scrollMaxY)  
    documentHeight = window.innerHeight + window.scrollMaxY;  
  
   // all but Explorer Mac  
   else if(document.body.scrollHeight > document.body.offsetHeight)  
    documentHeight = document.body.scrollHeight;  
  
   // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari  
   else  
    documentHeight = document.body.offsetHeight;  
  
  
   /*  
    * VIEWPORT HEIGHT  
    */  
  
   // all except Explorer  
   if(window.innerHeight)  
    viewportHeight = window.innerHeight;  
  
   // Explorer 6 Strict Mode  
   else if(document.documentElement && document.documentElement.clientHeight)  
    viewportHeight = document.documentElement.clientHeight;  
  
   // other Explorers  
   else if(document.body)  
    viewportHeight = document.body.clientHeight;  
  
   return documentHeight - viewportHeight - scrollPosition;  
  }

Wir ermitteln die Höhe des Dokuments (documentHeight), die Höhe des sichtbaren Bereichs (viewportHeight) und die aktuelle Position im Dokument (scrollPosition). Wir benötigen die Höhe des sichtbaren Bereichs, weil scrollPosition die obere Kante des viewports angibt.

Wenn du diese Funktion im Firefox / Safari ausführst, bekommst du in jedem Fall 0 zurückgeliefert, wenn du am Ende der Seite bist. Der Internet Explorer macht da wieder mal lustige Sachen. Der margin des body-Elements wird beim Ermitteln der documentHeight nicht berücksichtigt. Wenn <body> bspw. margin:10px hat, liefert die Funktion distanceToBottom() -20, weil marginTop und marginBottom nicht von documentHeight abgezogen wurden. wenn du einen negativen Margin auf <body> hast, ist der Rückgabewert der Margingröße entsprechend positiv. (Ich schätze aber einfach mal, dass negative Margins auf <body> eher die Seltenheit darstellen...)

Dein vorgehen ist also recht einfach:

var isAtBottom = ( distanceToBottom() <= 0 );  
/* dein-Ajax-hinzufüge-kram */  
if( isAtBottom )  
  window.scrollBy( 0, 123456789 );

wichtig ist zu sehen, dass VOR dem Hinzufügen neuer Inhalte geprüft werden muss, ob wir uns am Ende des Dokuments befinden...

weiterhin schönen abend...

--
Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
Beitrag melden
–
Informationen zu den Bewertungsregeln