Keep Div gescrollt nach unten

Question

Ich weiß, dass zahlreiche Fragen zu diesem Thema gestellt wurden, aber ich habe nicht eine gesehen, die das gleiche wie meine Anforderung ist.

Ich habe eine div und Daten werden hinzugefügt, indem Sie eine externe Seite aufrufen und dann die Ergebnisse live in das div schreiben. Das funktioniert gut mit:

<div id='test'> 

$x = popen("php test.php", 'r'); 

while($y = fgets($x, 512)) { 
    echo "$y<br>"; 
    ob_flush();flush(); 
} 
pclose($x); 

</div> 

test.php echo'ing seine Ergebnisse und das div wird aktualisiert.

Ich muss test Div nach unten scrollen. Ich habe es getan, wie so eine neue Zeile nach dem Echo $y durch Zugabe:

echo "<script>var objDiv = document.getElementById(\"test\");objDiv.scrollTop = objDiv.scrollHeight;</script>"; 

Aber ich fühle sich eine bessere Art und Weise, dass dann halten zu tun ist, hallt das Skript.

Kann jemand raten, wie man das div nach unten scrollt?

Gibt es keine Möglichkeit, ein Ereignis zu binden, das Inhaltsänderungen auf dem Div erkennt und dann nach unten scrollt, ohne den gleichen Code immer wieder zu wiederholen?

Dank

Das Ticket als Duplikat verwiesen wird, diskutiert auf den Boden der div Scrollen, nicht, wie man den Boden des div zu bewegen, wie sie es aktualisiert.

Answer 1

können Sie verwenden jQuery bind-Event:

$('.box').bind("DOMSubtreeModified propertychange", function(e) { 
    $(this).animate({ scrollTop: $(this).prop("scrollHeight") }, 100); 
}); 

working fiddle

wenn Sie die Daten über Ajax $(document).on()

$(document).on("DOMSubtreeModified propertychange", ".box", function(e) { 
     $(this).animate({ scrollTop: $(this).prop("scrollHeight") }, 100); 
}); 

working fiddle

Quelle abrufen: Jquery Event : Detect changes to the html/text of a div

DOMSubtreeModified funktioniert nicht auf IE.

Edit: Hinzugefügt `propertychange für IE-Unterstützung.

Answer 2

Ich habe meine Antwort bearbeitet. Erstens habe ich deine Frage nicht richtig gelesen. entferne einfach dieses echo von php und verwende es in deiner datei wo du ajax anrufst. Setzen Sie diese Zeile in Erfolg Teil von Ajax-Aufruf direkt nach der Zeile, in der Sie die Liste aktualisieren (das Div, in dem Sie die Daten aktualisieren).