所以我用Django Channels，Javascript和HTML/CSS做了一个聊天应用。我真的不太熟悉前端，但到目前为止，我的聊天应用似乎一切正常，除了聊天框本身在添加新消息时不会向下移动。
我把我的CSS类.chatbox设置为overflow: scroll，但是添加这个类不会在插入新消息时使框自动滚动。我假设基于研究，我需要修改我的javascript脚本，但是我真的不知道从哪里开始。再次强调，请慢一点，哈哈，我对前端不太熟悉。
当前Javascript：

<script>
    const chatLog = document.querySelector('#chat-log');
    const chatSocket = new WebSocket("ws://" + window.location.host + "/");

    if (!chatLog.hasChildNodes()) {
      const emptyText = document.createElement('h3')
      emptyText.id = 'emptyText'
      emptyText.innerText = 'No Messages'
      emptyText.className = 'empty Text'
      chatLog.appendChild(emptyText)
    };

    chatSocket.onopen = function (e) {
      console.log("The connection was setup successfully !");
    };

    chatSocket.onclose = function (e) {
      console.log("Something unexpected happened !");
    };

    document.querySelector("#id_message_send_input").focus();
    document.querySelector("#id_message_send_input").onkeyup = function (e) {
      if (e.keyCode == 13) {
        document.querySelector("#id_message_send_button").click();
      }
    };

    document.querySelector("#id_message_send_button").onclick = function (e) {
      var messageInput = document.querySelector("#id_message_send_input");
      message = messageInput.value;
      chatSocket.send(JSON.stringify({ message: message, username : "{{request.user.username}}"}));
      messageInput.value = "";
    };

    chatSocket.onmessage = function (e) {
      const data = JSON.parse(e.data);
      const messageElement = document.createElement('div');
      const userId = data['user_id']
      const loggedInUserId = JSON.parse(document.getElementById('user_id').textContent)
      messageElement.innerText = data.username + " : " + data.message;
      //messageElement.className = 'message'
      if (userId === loggedInUserId) {
        messageElement.classList.add('message', 'sender')
      } else {
        messageElement.classList.add('message', 'receiver')
      }

      chatLog.appendChild(messageElement)

      if (document.querySelector('#emptyText')) {
        document.querySelector('#emptyText').remove()
      }
    };
  </script>

当前聊天框CSS：

.chatbox {
    height: 55vh;
    margin-top: 20px;
    overflow: scroll;
}