Divを下にスクロールしてください

Question

私はこのことについて多くの質問がありましたが、私の要件と同じものは見ていません。

私はdivを持っています。外部ページを呼び出し、その結果をdivに書き込むことによってデータが追加されます。それは正常に動作します：

<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は結果をエコーし​​てdivを更新します。

test divを下にスクロールする必要があります。 私はそうのようなエコー$yの後に新しい行を追加することでそれをやってきた：

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

しかし、私は、そのスクリプトをエコー保つことを行うには良い方法があると感じています。

誰も下部をスクロールしたままにする方法をアドバイスできますか？

同じコードを繰り返しエコーすることなく、divでコンテンツの変更を検出し、次に下にスクロールするイベントをバインドする方法はありませんか？それが更新されるように、重複として参照

おかげ

チケットがdiv要素の一番下までスクロール議論され、NOT方法のdivの下までスクロールします。

Answer 1

あなたはjQueryのbind-Eventを使用することができます。

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

working fiddle

あなたは、AJAXを介してデータを取得する場合$(document).on()

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

working fiddle

出典： Jquery Event : Detect changes to the html/text of a div

DOMSubtreeModifiedはIEでは機能しません。

編集：IEサポートのために「propertychange」が追加されました。

Answer 2

私は自分の答えを編集しました。まず私はあなたの質問を正しく読まなかった。このエコーをPHPから削除して、あなたがajax呼び出しを行っているところのあなたのファイルでそれを使用してください。あなたがリストを更新する行（データを更新するdiv）の直後に、その行をajaxコールの成功部分に置きます。