自动滚动条答案

【问题标题】：Automatic scroll bar自动滚动条
【发布时间】：2022-01-27 20:30:30
【问题描述】：

我最初是在 PHP 中创建一个聊天，其中在名为 Message 的 div 中加载生成的对话。

通过 JavaScript/Ajax，我访问 PHP 文件并调出记录的对话，将来自该文件的数据放入 Message div。出于显而易见的原因，在消息编号 X 之后，会在此 div 中生成滚动条。使用 CSS，我设置了一个 overflor:auto 来生成垂直滚动。

最初，我无法让滚动条向下显示最后发送的消息。使用下面的代码，我设法做到了...

$(document).ready(function()
{
    setInterval(function(){
        readMessage();
        var textArea = document.getElementById('Message');
        textArea.scrollTop = textArea.scrollHeight;
    },1000);
});

但是，如果我想在视野上方和外部阅读上一条消息，则在手动向上滚动滚动条时（通过单击滚动条并向上或鼠标向上滚动），上面的代码使向下滚动，不允许我从对话中阅读我想要的内容。

我该如何解决这个问题？

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

只需使用 setTimeout 代替，然后在滚动后再次启动超时

$(document).ready(function()
{
    setTimeout(scrol,1000);
    function scrol() {
        readMessage();
        var textArea = document.getElementById("Message");
        textArea.scrollTop = textArea.scrollHeight;
        setTimeout(scrol,1000);
    }
}

请让我知道这是否可行，以及我是否犯了任何语法或约定错误，因为我非常熟悉 javascript 但对 jQuery 很陌生

【讨论】：