2
Wie Autoscroll ChatboxChat-Box, Auto Scroll nach unten
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:
<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:
.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;
}
Codefunktionen Nach zeigt, welche Benutzereingabe und wann cl ick on send, Benutzer wird sehen, seine sended Nachricht in zwei Richtungen .. eine in sendete & empfangene Form.
Gibt es eine Möglichkeit, um auto-scroll nach unten
Von den Klängen davon, was Sie wollen, ist eigentlich ruhig einfach Vielleicht könnten Sie ein einfaches Beispiel machen, anstatt eine große Codewand in die Frage zu stecken. (Oder verwandle es in einen funktionalen Ausschnitt, der auch funktioniert) – DBS
@DBS Ich habe es gelöscht, weil ich eine benutzerdefinierte Methode für die Bildlaufleiste in der Chat-Box verwendet habe und wenn ich nicht den richtigen Code habe, denken die Leute vielleicht, dass ich die Seite zum Scrollen brauche . –
Ich sehe keine benutzerdefinierte Bildlaufleiste im veröffentlichten Code, wenn Sie nur Styling meinen, als das die Frage nicht wirklich betrifft. – DBS