我正在尝试写一个简单的聊天功能页面。 随着行数的增加,我希望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>
当聊天日志区域填满时,它确实会滚动,但似乎只有一个像素,很快底线就消失了。
如何确保底线始终在眼前?
你可以像下面这样做
chat_log.scrollTop = chat_log.scrollHeight;