Question

https://jsfiddle.net/kv5gbamg/ - 我制作了一个jsfiddle，展示了系统的功能

基本上，我想知道每次收到新邮件后如何让滚动条显示在底部。

每个100MS我的系统都会使用已发送的任何新消息更新div。

但遗憾的是，收到新邮件后，它不会自动滚动到页面底部！

我的系统只是每x秒检查一次php文件

以下是我的代码片段：

echo "<div class='msg'>";
while($row = mysqli_fetch_array($result)) {
    echo "";
    echo "<div class='username'>" . $row['username'] . "</div>";
    echo "<div class='message'>" . $row['message'] . "</div>";
    echo "";
    }
echo "</div>";
mysqli_close($con);

这是它的工作原理：

它从数据库中获取消息并以div标签显示
用户还可以向发出POST请求的数据库发送消息

我想要它做但却无法理解：

当网页加载时，它应自动滚动到底部
每次收到新邮件时（基本上每次都有东西添加到数据库中），它应该向下滚动到页面底部
即使用户在页面上方，它也应该向下滚动

我已经在StackOverflow上看到了这些内容，但是只有在按下BUTTON后它们才会更新，因此，这意味着如果有人要向我发送消息，那么我就不会让页面向下滚动因为我不按按钮

我无法在StackOverflow上的任何地方看到已经回答的问题

P.S。基本上，我想要的滚动系统就像Messenger (Desktop Version)上的滚动系统，但我无法弄清楚如何滚动

非常感谢您花时间帮助我，我希望我已经为您提供了足够的信息来帮助我！（非常感谢，你不知道在这里帮助我有多大意义）

编辑： 这是我的JavaScript函数，用于从PHP文件中获取消息（在数据库中）

function showmessage(str) {
    if (str == "") {
        return;
    } else { 
        if (window.XMLHttpRequest) {

            xmlhttp = new XMLHttpRequest();
        } else {

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("chat").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","/backend-display.php?q="+str,true);
        xmlhttp.send();
    }
}

//Show any messages that will pop-up
setInterval('showmessage()',100);

Answer 1

**参见全屏示例

var i = 1;
var interval = setInterval(function() {
  execute();
}, 1000);

$(document).ready(function() {
  execute();
});

function execute() {
  $("#chatbox").append("This would be a message recieved from a database using an xmlhttp request!<br/><br/>");
  getMessages();

  if (i == 50) {
    clearInterval(interval);
  }
  i++;
}

function getMessages(letter) {
    var div = $("#chatbox");
    div.scrollTop(div.prop('scrollHeight'));
}

#chatbox {
  padding: 5rem 1.5rem;
  text-align: left;
  height:300px; 
  width:75%; 
  margin:0 auto;
  background: green;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="chatbox">
</div>
</div>
Users could send a message if they wanted to (As there is a send box)

如果你搜索它，只需添加我的getMessages（）函数..

请告诉我它是否对您有所帮助。

希望能提供帮助。

Answer 2

我认为那就是你想要的我添加了

$('#chatbox').scrollTop($('#chatbox')[0].scrollHeight);

追加后我们得到div高度然后滚动这是一个新的fiddle

添加新内容时如何自动向下滚动div（来自xmlhttp.open）

2 个答案: