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

-我制作了一个JSFIDLE，展示了系统的功能

基本上，我想知道如何在每次收到新消息时将滚动条置于底部

每隔100毫秒，“我的系统”就会用将要发送的任何新消息更新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);

---

**请参阅全屏显示的示例

var i=1；
var interval=setInterval（函数（）{
执行（）；
}, 1000);
$（文档）.ready（函数（）{
执行（）；
});
函数execute（）{
$（“#聊天盒”）.append（“这将是使用xmlhttp请求从数据库接收的消息！

”；
getMessages（）；
如果（i==50）{
间隔时间；
}
i++；
}
函数getMessages（字母）{
var div=$（“#聊天室”）；
div.scrollTop（div.prop（'scrollHeight'））；
}

#聊天室{
填充物：5雷姆1.5雷姆；
文本对齐：左对齐；
高度：300px；
宽度：75%；
保证金：0自动；
背景：绿色；
溢出：自动；
}

如果用户愿意，可以发送消息（因为有一个发送框）

我想这就是你想要的 我补充说

在append之后，我们得到div高度，然后滚动

---

这里有一个新的

这不是执行此操作的代码。PHP是服务器端代码，您需要客户端代码，JavaScript。请发布实际更新文档的代码。我知道PHP是如何工作的，朋友，我只是演示javascript调用一个PHP文件，从数据库输出名称和消息。我也会加入我的Javascript，非常感谢！为什么不呢？@Spectarion这是因为用户将无法看到他们以前的任何消息！检查小提琴，先生。。。我更新了。我把你的代码放在小提琴里，什么都没发生？（我不会拼你的名字，很抱歉没有加上）：（对我来说它是空的（我正在运行谷歌浏览器）我把你的代码放进去了，但它只是每秒滚动到底部（不是在新消息出现时）@AcrylicTrain不！代码是相同的，追加后它会滚动，可能是因为文本是相同的，如果计数器达到50，请看这里stops@AcrylicTrain另外，您也可以尝试使用“动画制作”，因为我只希望在使用XMLHttpRequest接收到新消息时，代码可以向下滚动。@Spectarion的想法是正确的。这就是您在fiddle中提供的代码，您可以将相同的代码放在您去的地方（例如：附加消息的函数）

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

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