2
私は、MySQLデータベースからデータを取得し、EventSource APIを使用してウェブサイトに表示しています。これまでのところすべてが正常に機能していましたが、データを固定の高さのdivに表示し、スクロールバーをののdivに固定します。つまり、常に最新のフィード結果が最初に表示されます。ライブデータフィードとスクロールバーの位置
ページを読み込むと、スクロールバーは上部に固定されます。
私は提案hereを試しましたが、それは動作しないようです。それはdivを入力するためにライブデータとAJAXリクエストを処理しているからですか？
私の結婚式はこれまで通りです。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<style type="text/css">
#result {
overflow: auto;
max-height:224px;
width: 500px;
}
</style>
<script type="text/javascript">
// scrollbar to bottom
$("document").ready(function(){
var objDiv = document.getElementById("result");
objDiv.scrollTop = objDiv.scrollHeight;
});
// retrieve data from server and display in div
$("document").ready(function(){
var source = new EventSource("data.php");
var offline;
$.ajax({
type: "POST",
url: 'data.php',
data: {lastSerial: true},
dataType: 'json',
success: function(data){
$.each(data, function(key, value) {
document.getElementById("result").innerHTML += "New transaction: " + value.SerialNo + ' ' + value.TimeStamp + "<br>";
});
} // end success
});
});//end dom ready
</script>
</head>
<body>
<div id="result"><!--Server response inserted here--></div>
</body>
</html>
奇妙な、私はそれが機能<div id="result">にいくつかの（Loremのイプサム）テキストを追加するJavaScript、手動でライブフィードを削除するたびに、これは、スクロールバーがdivの下部に表示されています。
私が何かアドバイスが高く評価され、非常に愚かな何か:)
を行うことができます。
両方のソリューションが完璧に動作します。私はあなたの2番目の '.prepend（）'メソッドを使うことに決めました。ありがとう – TheOrdinaryGeek