SapuSeven: Scrollbares div - (per js) ganz nach unten scrollen

Hallo,
Ich habe einen div-container mit overflow: auto und aktualisiere diesen laufend per AJAX und setInterval.
Wie bekomme ich hin, dass bei jeder Aktualisierung automatisch bis ganz nach unten gescrollt wird?
MfG,
SapuSeven

  1. Liebe(r) SapuSeven,

    Wie bekomme ich hin, dass bei jeder Aktualisierung automatisch bis ganz nach unten gescrollt wird?

    vielleicht mit <myNode>.scrollIntoView?

    Liebe Grüße,

    Felix Riesterer.

    --
    "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
    1. Liebe(r) SapuSeven,

      Lieber,

      vielleicht mit <myNode>.scrollIntoView?

      Nein, das funktioniert leider nicht...

      1. Lieber SapuSeven,

        vielleicht mit <myNode>.scrollIntoView?
        Nein, das funktioniert leider nicht...

        doch, das funktioniert. Was machst Du falsch?

        Liebe Grüße,

        Felix Riesterer.

        --
        "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
        1. Also, hier der Code:

          index.htm:

          <!DOCTYPE html>  
          <html>  
          <head>  
          <style type="text/css">  
          #text {  
            height:100px;  
            width: 300px;  
            border:1px solid black;  
            margin:auto;  
            overflow:auto;  
          }  
          </style>  
          <script type="text/javascript">  
          var request = false;  
            
          function setRequest()  
          {  
          	request = new XMLHttpRequest();  
          	  
          	if (!request)  
          	{  
          		alert("Fehler: Kann keine XMLHTTP-Instanz erzeugen");  
          		return false;  
          	}  
          	else  
          	{  
          		request.open('post', 'myfile.txt', true);  
          		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
          		request.send("");  
          		request.onreadystatechange = interpretRequest;  
          	}  
          }  
            
          function interpretRequest() {  
          	switch (request.readyState)  
          	{  
          		case 4:  
          			if (request.status == 200)  
          			{  
          				var content = request.responseText;  
          				document.getElementById('text').innerHTML = content;  
          				document.all.lastEntry.scrollIntoView(true);  
          				window.setTimeout("setRequest()", 10000);  
          			}  
          			break;  
          		default:  
          			break;  
          	}  
          }  
          setRequest();  
          </script>  
          </head>  
          <body>  
          <div id="text">Loading...</div>  
          </body>  
          </html>
          

          myfile.txt:

          a<br/>  
          b<br/>  
          c<br/>  
          d<br/>  
          e<br/>  
          f<br/>  
          g<br/>  
          h<br/>  
          i<br/>  
          j<br/>  
          k<br/>  
          l<br/>  
          m<br/>  
          n<br/>  
          o<br/>  
          <span id="lastEntry">p</span>
          

          Es funktioniert nicht.

          1. Lieber SapuSeven ,

            also Dein Code funzt nicht. Schön! Hast Du auch eine Fehlermeldung Deines Browsers parat? Vielleicht könnte die Dir erzählen, was da genau schief läuft!

            Das erste Problem ist, dass Dein JavaScript-Code ausgeführt wird, bevor das Dokument vollständig geladen ist. Das Element "text" könnte noch nicht vorhanden sein. Dein Code prüft nicht, ob das Element schon verfügbar ist, sondern setzt die Verfügbarkeit einfach voraus. Fehler!

            code lang=javascript]
            var content = request.responseText;
            document.getElementById('text').innerHTML = content;
            document.all.lastEntry.scrollIntoView(true);
            window.setTimeout("setRequest()", 10000);[/code]

            Warum nur notierst Du "document.all.lastEntry"?? Das ist JScript - und kein offizieller Standard! Viele Browser unterstützen es zwar, aber wozu, wenn Du doch eine Zeile darüber mit getElementById eine bessere und standardkonforme Herangehensweise hast!? In meinem FF ist diese Eigenschaft z.B. leer. Er kennt zwar "document.all", aber er kennt keine Elemente mit ID unter dieser Eigenschaft

            Aber auch hier prüfst Du wieder nicht, ob das Objekt vorhanden ist, sondern nutzt sofort eine seiner Methoden, ohne zu wissen, ob es diese hat! Fehler!

            Ich habe hier ein Beispiel, das tut: http://jsfiddle.net/Laberwurschd/7Lvtw3s4/

            Liebe Grüße,

            Felix Riesterer.

            --
            "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
            1. Das erste Problem ist, dass Dein JavaScript-Code ausgeführt wird, bevor das Dokument vollständig geladen ist. Fehler!

              Nein, der Inhalt wird erst nach dem Request verändert, dieser ist, wie der Name schon sagt, asynchron, das Dokument kann währenddessen laden.

              Warum nur notierst Du "document.all.lastEntry"??

              Ich habe den Code aus dem Artikel zu scrollIntoView kopiert.
              Stimmt, getElementById wäre besser.

              Ich weiß jetzt jedoch, dass mein mobiler Browser das scrollen in divs nicht beherrscht, am Computer funktioniert es einwandfrei.

              Danke auch für dein Beispiel auf jsFiddle.