如何在HTML CSS中始终使滚动始终在页面末尾我希望滚动条始终位于页面的结尾

问题描述

我正在使用HTML和CSS进行聊天，但是每次聊天到达页面末尾或每当有新消息自动向下滚动。这是我当前的代码。我可以使用javascript，但不确定该怎么做。有人可以给我实现该实现的代码和/或可能修复我的HTML CSS格式吗？它也非常无格式。

<link
  href="https://fonts.googleapis.com/css2?family=Varela&display=swap"
  rel="stylesheet"
/>
<title>Chatapp-shit</title>
<style>
  img.emoji {
     height: 1.1em;
     width: 1.1em;
     margin: 0 .05em 0 .1em;
     vertical-align: -0.2em;
  }  
  body,html {
  font-family:Varela;
    text-align:center;
    color:black;

      background: url("https://cdn.glitch.com/f5439616-0499-46af-88f4-47cd6c56f967%2Fb1fe7c55-6b04-4b0a-9ac3-9e7dc2f71c31.image.png?v=1599054597547") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
.sub_div { 
                position: absolute; 
                bottom: 40px; 
  margin-left: 30px;
            } 
  
</style>

<div>
  <h1>
    Chatapp Room
  </h1>
  <h2>
    Chat with friends in a comfortable way!
  </h2>
</div>
<div id="box" class="center">
  <div id="messages">
    
  </div>
  <div class="sub_div" id="inputs" >
    <input type="text" id="message" placeholder="Message" />
    <button onclick="sendMessage()">Send</button>
  </div>
  
</div>
<div class="vertical-menu" id="vertical-menu">
  
<style>
  .center {
    margin: auto;
    width: 700px;
    height: 500px;
    background: white;
    border: 4px solid black;
    overflow-y: scroll
  }
  

</style>
</div>```

解决方法

这里是有关如何使用普通javascript使消息div滚动到底部的快速演示。

大概您希望在每次添加新消息时都呼叫scrollDown()。

function scrollDown() {
  const messagesElem = document.querySelector('#messages');
  messagesElem.scrollTop = messagesElem.scrollHeight - messagesElem.clientHeight;
}

#messages {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid black;
}

<button onclick="scrollDown()">Scroll Down</button>
<div id="messages">
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
  a<br/>
</div>