Question

我正在从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的底部。

我可能会做一些非常愚蠢的事情：）

感谢任何建议。

Answer 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/我认为这对用户更友好，但显然取决于你。

Answer 2

我不是百分之百确定这个，但我看到的一个问题是你在服务器之后进行异步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">
              // 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后执行滚动操作，它应该可以正常工作。

Answer 3

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

该代码没有说＆＃34;锚定＆＃34;滚动条到底部，它只是向下滚动div的实际高度一次，但是因为你把这个代码放在你的ajax请求之前，你的div必须是空的，所以只需把两行放在你的ajax的结束＆＃34;成功＆＃34;功能

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;
}

Answer 4

这只是你想念的小行，请添加以下代码

DB::table("test1")->whereIn('id', $arr)->get();

实时数据Feed和滚动条位置

4 个答案: