实时数据馈送和滚动条位置答案

【问题标题】：Live Data Feed and Scrollbar Position实时数据馈送和滚动条位置
【发布时间】：2017-08-16 09:57:09
【问题描述】：

我正在从 MySQL 数据库中检索数据并使用 EventSource API 将其显示在网站上。到目前为止，一切都按预期工作，但我想以固定高度 div 显示数据，并将滚动条固定到此 div 的底部 - 即始终显示最新的提要结果首先。

现在，当我加载页面时，滚动条固定在顶部。

我已经尝试了here 的建议，但它似乎不起作用。是因为我正在处理实时数据和 AJAX 请求以填充div？

到目前为止，我的目标是；

<!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>

奇怪的是，每当我删除实时提要 javascript 并手动将一些（lorem ipsum）文本添加到 <div id="result"> 中时，滚动条就会出现在 div 的底部。

我可能会做一些非常愚蠢的事情:)

感谢任何建议。

【问题讨论】：

标签： javascript jquery css ajax html

【解决方案1】：

当您通过 ajax 加载更多数据时，内容的大小会发生变化。渲染内容后，您是否尝试过再次设置滚动？即：

  success: function(data){
      var objDiv = document.getElementById("result");

      $.each(data, function(key, value) {
          objDiv.innerHTML += "New transaction: " + value.SerialNo + ' ' + value.TimeStamp + "<br>";
      });
      objDiv.scrollTop = objDiv.scrollHeight;
     } // end success
 });

因此设置滚动值的方式与页面加载时相同。

或者，这是另一个完全不同的选择：

如果您希望最新的值最突出，您可以简单地以相反的顺序输出它们，因此最新的值位于 div 的顶部，用户将首先看到它们。您可以使用 jQuery 的 .prepend() 方法将内容添加到 div 的开头，在前面的结果之上。那么就没有必要搞乱滚动了。 http://api.jquery.com/prepend/ 我认为这对用户更友好，但这显然取决于您。

【讨论】：

完美运行，两种解决方案。我决定采用你的第二种.prepend() 方法——更干净！谢谢

【解决方案2】：

我对此不是 100% 确定，但我看到的一个问题是您在滚动到 div 底部之后对服务器进行异步 AJAX 调用。 p>

也许可以尝试类似的方法：

<!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">
              // 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>";
                          });
                         var objDiv = document.getElementById("result");
                         objDiv.scrollTop = objDiv.scrollHeight;
                         } // end success
                     });
          });//end dom ready
    </script>
</head>
<body>
    <div id="result"><!--Server response inserted here--></div>
</body>
</html>

说明：当您滚动到它的底部后，该 div 会被填充。因此，当滚动执行时，scrollHeight 属性仍然是 div 的原始高度值。现在，如果您在填充 div 后执行滚动操作，它应该可以正常工作。

【讨论】：

【解决方案3】：

var objDiv = document.getElementById("result");
objDiv.scrollTop = objDiv.scrollHeight;

该代码并未将滚动条“锚定”到底部，它只是将 div 的实际高度向下滚动一次，但由于您将这段代码放在您的 ajax 请求之前，您的div 必须为空，所以只需将这两行放在 ajax“成功”函数的末尾即可。

success: function(data){
    $.each(data, function(key, value) {
        document.getElementById("result").innerHTML += "New transaction: " + value.SerialNo + ' ' + value.TimeStamp + "<br>";
    });
    var objDiv = document.getElementById("result");
    objDiv.scrollTop = objDiv.scrollHeight;
}

【讨论】：

【解决方案4】：

这只是您缺少的一小行，请添加以下代码

 $.ajax({
  type: "POST",
  url: 'data.php',
  data: {lastSerial: true},
  dataType: 'json',
  success: function(data){
      var objDiv = document.getElementById("result");

      $.each(data, function(key, value) {
          objDiv.innerHTML += "New transaction: " + value.SerialNo + ' ' + value.TimeStamp + "<br>";
      });
      objDiv.scrollTop = objDiv.scrollHeight;
     } // end success
 });

【讨论】：