【问题标题】：Chat scroll bottom CSS or Javascript only仅聊天滚动底部 CSS 或 Javascript
【发布时间】：2018-02-15 20:50:57
【问题描述】：
请帮我解决这个问题。我在这里附上我的代码的一部分。这是一个聊天，默认情况下我需要滚动条位于底部，并且当有新消息进入时，它应该将其余部分向上移动。
.inner-chat-info {
display: flex;
align-items: center;
display: -webkit-flex;
margin-bottom: 10px;
padding-top: 10px;
}
.chat-user-name {
font-size: 16px;
font-weight: bold;
color: #2581bd;
}
.chat-user-data {
margin-left: 12px;
}
.dialog-text {
font-weight: 100;
font-size: 16px;
}
.message-date {
color: #bbbbbb;
font-weight: 100;
}
.dialog {
padding: 0 40px;
height: 350px;
overflow-y: scroll;
}
.send-msb-btn {
margin-right: 10px;
}
<div class="dialog">
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name">Hello hello </span>
<span class="message-date">сHello hello :17</span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/leonardo.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">9:20</span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">10:20 </span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/leonardo.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello и </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
:)
</div>
</div>
</div>
</div>
我尝试自己实现它，但没有得到它。我用 scrollTop 和 scrollHeight 尝试了所有这些答案，但没有奏效。如果可能，请帮助我更正我的代码。谢谢！
【问题讨论】：
标签：
javascript
html
css
chat
【解决方案1】：
我用 jquery 做这个，因为它用一段代码解决了你的问题。
首先我们得到窗口的高度
$(window).height()
然后我们可以以该高度为目标，并以窗口的高度为值应用 scrollTop 函数
$('.dialog').scrollTop(heightValue);
如您所见，我添加了一个按钮来克隆消息并将其插入底部。此侦听器将 100 添加到页面高度变量，因此它将始终到达底部。我在获取消息的确切高度时遇到了一些问题。
我尝试使用outerHeight()，但最终它还是跌到了谷底。
希望这就是您想要的。如果需要，很乐意解释或帮助提供更好的解决方案。
var pageHeight = $('.dialog').height();
$('.dialog').scrollTop(pageHeight);
//Function to fake new message
$('button').click(function() {
$('#clone').clone().appendTo('.dialog');
pageHeight = pageHeight + 100;
$('.dialog').scrollTop(pageHeight);
})
.inner-chat-info {
display: flex;
align-items: center;
display: -webkit-flex;
margin-bottom: 10px;
padding-top: 10px;
}
.chat-user-name {
font-size: 16px;
font-weight: bold;
color: #2581bd;
}
.chat-user-data {
margin-left: 12px;
}
.dialog-text {
font-weight: 100;
font-size: 16px;
}
.message-date {
color: #bbbbbb;
font-weight: 100;
}
.dialog {
padding: 0 40px;
height: 350px;
overflow-y: scroll;
}
.send-msb-btn {
margin-right: 10px;
}
button {
position: fixed;
top: 5vh;
left: 5vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dialog">
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name">Hello hello </span>
<span class="message-date">сHello hello :17</span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/leonardo.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">9:20</span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">10:20 </span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/leonardo.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello и </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
:)
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
:)
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
:)
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
:)
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
:)
</div>
</div>
</div>
<div id='clone' class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
:)
</div>
</div>
</div>
<button>New Message</button>
</div>
【解决方案2】：
这是一个使用纯js的解决方案。每当添加新消息时，您都可以调用updateScroll()（来自https://stackoverflow.com/a/18614545/1309377），如本例所示，或将其保持在一秒或其他时间间隔内。
element.scrollTop = element.scrollHeight;会将对话框的滚动设置为div的总高度，从而使滚动条保持在底部。
document.getElementById("addMessage").addEventListener("click", addMessage);
function addMessage() {
var chatInfo = document.getElementsByClassName("inner-chat-info")[0].outerHTML;
var dialog = document.getElementsByClassName("dialog")[0];
var currMsgs = dialog.innerHTML;
dialog.innerHTML = currMsgs += chatInfo;
updateScroll();
}
function updateScroll() {
var element = document.getElementsByClassName("dialog")[0];
element.scrollTop = element.scrollHeight;
}
.inner-chat-info {
display: flex;
align-items: center;
display: -webkit-flex;
margin-bottom: 10px;
padding-top: 10px;
}
.chat-user-name {
font-size: 16px;
font-weight: bold;
color: #2581bd;
}
.chat-user-data {
margin-left: 12px;
}
.dialog-text {
font-weight: 100;
font-size: 16px;
}
.message-date {
color: #bbbbbb;
font-weight: 100;
}
.dialog {
padding: 0 40px;
height: 350px;
overflow-y: scroll;
}
.send-msb-btn {
margin-right: 10px;
}
<button id="addMessage">Add message</button>
<div class="dialog">
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name">Hello hello </span>
<span class="message-date">сHello hello :17</span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/leonardo.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">9:20</span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">10:20 </span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/leonardo.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello и </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
Hello hello
</div>
</div>
</div>
<div class="inner-chat-info">
<div class="chat-user-photo">
<img class="" src="./assets/images/users/tom.png" alt="">
</div>
<div class="chat-user-data">
<span class="chat-user-name"> Hello hello </span>
<span class="message-date">Hello hello </span>
<div class="dialog-text">
:)
</div>
</div>
</div>
</div>