如何使用javascript滚动到文本区域的底部？_Javascript_Html_Dom

如何使用javascript滚动到文本区域的底部？

javascript html dom

如何使用javascript滚动到文本区域的底部？,javascript,html,dom,Javascript,Html,Dom,我正在尝试写一个简单的聊天功能页面。随着行数的增加，我希望文本区域滚动，以便始终看到底线。我已经编写了一个小java脚本来实现以下目标这是我的html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Scroll</title> </head> <body&

我正在尝试写一个简单的聊天功能页面。随着行数的增加，我希望文本区域滚动，以便始终看到底线。我已经编写了一个小java脚本来实现以下目标

这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scroll</title>
</head>
<body>

    <textarea id="chat-log" cols="50" rows="5"></textarea><br>
    <input id="chat-message-input" type="text" size="64"><br>
    <input id="chat-message-submit" type="button" value="Send">

    <script>
        var chat_submit = document.getElementById("chat-message-submit");
        chat_submit.onclick = function(e) {
            const messageInputDom = document.getElementById("chat-message-input");
            const message = messageInputDom.value;
            var chat_log = document.getElementById("chat-log");
            messageInputDom.value = '';
            chat_log.value += message + '\n';
            chat_log.scrollIntoView(false); // Bottom
        };
    </script>
</body>
</html>


纸卷




var chat_submit=document.getElementById（“聊天消息提交”）；
chat_submit.onclick=函数（e）{
const messageInputDom=document.getElementById（“聊天信息输入”）；
const message=messageInputDom.value；
var chat_log=document.getElementById（“聊天日志”）；
messageInputDom.value=''；
chat_log.value+=消息+'\n'；
chat_log.scrollIntoView（false）；//底部
};

当聊天日志区域填满时，它确实会滚动，但看起来只有一个像素，很快底线就消失了

我怎样才能确保底线始终在我的视野之内？

你可以像下面这样做

chat_log.scrollTop = chat_log.scrollHeight;