提问者:小点点

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


我正在尝试写一个简单的聊天功能页面。 随着行数的增加,我希望textarea滚动,以使底线始终在视野中。 我编写了一个小的Java脚本来实现这一点,下面是W3S的例子

这是我的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>

当聊天日志区域填满时,它确实会滚动,但似乎只有一个像素,很快底线就消失了。

如何确保底线始终在眼前?


共1个答案

匿名用户

你可以像下面这样做

chat_log.scrollTop = chat_log.scrollHeight;