Boîte de Chat, défilement automatique vers le bas
Comment la fonction de défilement automatique de la zone de discussion
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 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;
}
Code suivant fonctions de la montre, ce que l'entrée de l'utilisateur et quand on clique sur envoyer, l'utilisateur verra, son envoyé messaged dans les deux sens.. on en renvoi & reçu forme.
Est-il un moyen d'auto-défilement vers le bas
- De les sons de celui-ci, ce que vous voulez est en fait assez simple, on pourrait peut-être faire un exemple simple, plutôt que de vider un grand code de la paroi de la question. (Ou, le transformer en une fonctionnelle extrait de code, qui fonctionne aussi)
- je sous-évaluées, car j'ai utilisé de façon personnalisée pour la barre de défilement dans la fenêtre de chat, et si je n'ai pas le code complet, les gens pourraient penser que j'ai besoin de page pour faire défiler.
- Je ne vois pas de barre de défilement personnalisée dans la posté code, si vous venez de le dire style, que ça n'affecte pas vraiment la question.
Vous devez vous connecter pour publier un commentaire.
Ajouter à votre code:
Afin de le soumettre cliquez sur la fonction ressemble à ceci:
JSFiddle DÉMO
.stop()
avant de votre animation.Depuis on dirait que vous êtes à l'aide de JQuery, vous pouvez utiliser la fonction animate de bien accomplir cette tâche.
Vérifier ce violon. Vous avez juste besoin d'ajouter
scrollTop()
à la.msg-container-base
https://jsfiddle.net/Pranesh456/w6p5b3x6/1/
j'ai comme simple solution de code: testé et il fonctionne, explication: div a l'id de chat-fenêtre, nous utilisons scrollTo méthode et à l'intérieur on commence à partir de 0 et de garder défilement sur chat-bas de la fenêtre, comment aller vers le bas? simplement à l'aide de défilement de la Hauteur, nous pouvons obtenir la hauteur de chat-fenêtre, et de garder le défilement vers le bas vers le bas pour toujours sur la fenêtre de chat
JS:
HTML:
Code très simple qui vérifie si l'utilisateur est en bas.
Si l'utilisateur est en bas puis de chat page sera automatiquement défiler avec nouveau message.
et si l'utilisateur de faire défiler vers le haut puis la page ne sera pas de défilement automatique vers le bas..
Code JS -
code html -
CSS:
HTML: