Javascript 聊天框，自动滚动到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39729791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chat box, auto scroll to bottom
提问by Divyam Solanki
How to auto scroll chat box
如何自动滚动聊天框
HTML:
HTML：
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title>College Enquiry Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
</script>
</head>
<body>
<div class="panel panel-primary" style="border:0px">
<div class="panel-heading top-bar">
<div class="col-md-8 col-xs-8">
<h3 class="panel-title"><span class="glyphicon glyphicon-comment" style="margin-right:6px;"></span>College Enquiry Chat</h3>
</div>
</div>
<div class="panel-body msg_container_base">
<div class="row msg_container base_sent">
<div class="col-md-10 col-xs-10">
<div class="messages msg_sent">
<p>that mongodb thing looks good, huh?
tiny master db, and huge document store</p>
</div>
</div>
</div>
<div class="row msg_container base_receive">
<div class="col-md-10 col-xs-10">
<div class="messages msg_receive">
<p>that mongodb thing looks good, huh?
tiny master db, and huge document store</p>
</div>
</div>
</div>
<chat_log> . </chat_log>
</div>
<!--CHAT USER BOX-->
<div class="panel-footer">
<div class="input-group" id="myForm">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Write your message here...">
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="submit" type="submit">Send</button>
</span>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript:
Javascript：
<script>
$("#submit").click(function() {
var data = $("#btn-input").val();
//console.log(data);
$('chat_log').append('<div class="row msg_container base_sent"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div><div class="row msg_container base_receive"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div>');
clearInput();
});
function clearInput() {
$("#myForm :input").each(function() {
$(this).val(''); //hide form values
});
}
$("#myForm").submit(function() {
return false; //to prevent redirection to save.php
});
</script>
CSS :
CSS :
.msg_container_base{
background: #e5e5e5;
margin: 0;
padding: 0 10px 10px;
max-height:80vh;
overflow-x:hidden;
}
.top-bar {
background: #666;
color: white;
padding: 10px;
position: relative;
overflow: hidden;
}
.msg_receive{
padding-left:0;
margin-left:0;
}
.msg_sent{
padding-bottom:20px !important;
margin-right:0;
}
.messages {
background: white;
padding: 10px;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
max-width:100%;
}
.messages > p {
font-size: 13px;
margin: 0 0 0.2rem 0;
}
.messages > time {
font-size: 11px;
color: #ccc;
}
.msg_container {
padding: 10px;
overflow: hidden;
display: flex;
}
img {
display: block;
width: 100%;
}
.avatar {
position: relative;
}
.base_receive > .avatar:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border: 5px solid #FFF;
border-left-color: rgba(0, 0, 0, 0);
border-bottom-color: rgba(0, 0, 0, 0);
}
.base_sent {
justify-content: flex-end;
align-items: flex-end;
}
.base_sent > .avatar:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border: 5px solid white;
border-right-color: transparent;
border-top-color: transparent;
box-shadow: 1px 1px 2px rgba(black, 0.2); // not quite perfect but close
}
.msg_sent > time{
float: right;
}
.msg_container_base::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.msg_container_base::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
.msg_container_base::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
.btn-group.dropup{
position:fixed;
left:0px;
bottom:0;
}
Following code functions shows, what user input and when click on send, user will see, his sended messaged in two way.. one in sended & received form.
以下代码功能显示，用户输入什么，点击发送时，用户将看到，他发送的消息有两种方式..一种是发送和接收形式。
Is there a way to auto-scroll to bottom
有没有办法自动滚动到底部
回答by NickyTheWrench
Add this to your code:
将此添加到您的代码中：
$(".msg_container_base").stop().animate({ scrollTop: $(".msg_container_base")[0].scrollHeight}, 1000);
So the submit click function looks like this:
所以提交点击函数看起来像这样：
$("#submit").click(function() {
var data = $("#btn-input").val();
//console.log(data);
$('chat_log').append('<div class="row msg_container base_sent"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div><div class="row msg_container base_receive"><div class="col-md-10 col-xs-10"><div class="messages msg_receive"><p>'+data+'</p></div></div></div>');
clearInput();
$(".msg_container_base").stop().animate({ scrollTop: $(".msg_container_base")[0].scrollHeight}, 1000);
});
回答by Dominic Aquilina
Since it looks like you're using JQuery, you can use the animate function to smoothly accomplish this.
由于看起来您正在使用 JQuery，因此您可以使用 animate 函数来顺利完成此操作。
$('#myMessageContainer').stop ().animate ({
scrollTop: $('#myMessageContainer')[0].scrollHeight
});
回答by Pranesh Ravi
Check this fiddle. You just need to add scrollTop()to the .msg-container-base
检查这个小提琴。你只需要添加scrollTop()到.msg-container-base
回答by Ilhom Jones
I have such simple code solution: tested and it works, explanation: div has id chat-window, we use scrollTo method and inside we start from 0 and keep scroll on the chat-window bottom, how do we get to the bottom? simply using scroll Height we can get the height of chat-window, and keep the scroll down to bottom forever on chat window
我有这么简单的代码解决方案：经过测试，它有效，解释：div有id聊天窗口，我们使用scrollTo方法，在里面我们从0开始并在聊天窗口底部保持滚动，我们如何到达底部？只需使用滚动高度，我们就可以获得聊天窗口的高度，并在聊天窗口上永远向下滚动到底部
JavaScript:
JavaScript：
chatWindow = document.getElementById('chat-window');
var xH = chatWindow.scrollHeight;
chatWindow.scrollTo(0, xH);
HTML:
HTML：
<div id="chat-window"></div>
回答by Gaurav Saini
Very simple code which check if user is at bottom. If user is at bottom then chat page will automatically scroll with new message. and if user scroll up then page will not auto scroll to bottom..
非常简单的代码，用于检查用户是否在底部。如果用户在底部，则聊天页面将自动滚动显示新消息。如果用户向上滚动，则页面不会自动滚动到底部..
JS code -
JS代码——
var checkbottom;
jQuery(function($) {
$('.chat_screen').on('scroll', function() {
var check = $(this).scrollTop() + $(this).innerHeight() >= $(this)
[0].scrollHeight;
if(check) {
checkbottom = "bottom";
}
else {
checkbottom = "nobottom";
}
})
});
window.setInterval(function(){
if (checkbottom=="bottom") {
var objDiv = document.getElementById("chat_con");
objDiv.scrollTop = objDiv.scrollHeight;
}
}, 500);
html code -
html代码-
<div id="chat_con" class="chat_screen">
</div>
回答by Abdo-Host
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
div,table {
background: #eee;
border: 2px solid #aaa;
padding: 15px;
}<table>
<tr>
<td class="wrapword">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td class="wrapword">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td class="wrapword">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
</table>
<br>
<div class="wrapword">
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</div>