Chat-box, auto-scroll nach unten

Wie " automatisches scrollen von chat-box

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;
}

Folgenden code-Funktionen zeigt, was mit Benutzereingaben, und wenn Sie klicken Sie auf senden, Benutzer zu sehen, seine verschickten Nachrichten in zwei-Wege - .. eine in sended & form erhalten.

Ist es ein Weg, um auto-scroll nach unten

Von den Klängen der es, was Sie wollen, ist eigentlich ziemlich einfach, vielleicht könnten Sie ein einfaches Beispiel, anstatt dumping eine große code-Wand in Frage. (Oder schalten Sie es in einen funktionalen snippet, das funktioniert auch)
ich weggeworfen, weil ich verwendet haben, benutzerdefinierten Weise für die scrollbar in der chat-box, und wenn ich nicht Recht vollständigen code, die Leute denken, ich brauche die Seite um zu Blättern.
Ich sehe keine benutzerdefinierte Bildlaufleiste in den code gepostet, wenn man nur bedeuten, styling, als das nicht wirklich Einfluss auf die Frage.

InformationsquelleAutor Divyam Solanki | 2016-09-27

Fügen Sie diese zu Ihrem code:

$(".msg_container_base").stop().animate({ scrollTop: $(".msg_container_base")[0].scrollHeight}, 1000);

So klicken Sie auf die submit-Funktion sieht wie folgt aus:

$("#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);
});

JSFiddle DEMO

Wenn, erhält mehr als 1 Nachricht pro Sekunde wird es beginnen, sich nach hinten fallen, bleiben eine .stop() vor Ihr zu animieren.
danke für den Beitrag
GENIAL Vorschlag - nur Hinzugefügt, um meine Antwort. Nochmals vielen Dank.

InformationsquelleAutor NickyTheWrench

3

Check this fiddle. Sie brauchen nur zu addieren scrollTop() zu den .msg-container-base

https://jsfiddle.net/Pranesh456/w6p5b3x6/1/

Vielen Dank @Pranesh
Dies scheint nicht zu funktionieren... Es wird immer versuchen, um zu Blättern, um die maximale Höhe der container (basiert auf der Bildschirm-Größe, nicht scrollen), D. H. sobald Sie genug haben, Blättern Sie zu verdoppeln, den Eltern Größe, es funktioniert. Sie sind im Grunde nur zu sagen, "Blättern Sie zu <generic number>"
Ich habe den link zu der Fiedel, du bist willkommen, es zu versuchen.
Ich habe.. nach der Zugabe von 5-6 Nachrichten (abhängig von der Display-Größe, gehen Sie einfach weiter und es wird aufhören), Sie haben gescrollt, um die Container maximale Höhe, und es wird aufhören zu arbeiten.
die fiddle bitte überprüfen Sie

InformationsquelleAutor Pranesh Ravi
2

Da es aussieht wie bist du mit JQuery, können Sie die animate-Funktion reibungslos erfüllen.
```
$('#myMessageContainer').stop ().animate ({
  scrollTop: $('#myMessageContainer')[0].scrollHeight
});
```
Danke für die Hilfe

InformationsquelleAutor Dominic Aquilina

Sehr einfachen code, die prüfen, wenn sich ein Benutzer am unteren Rand.
Wenn der Benutzer am unteren Rand, dann die chat-Seite wird automatisch scrollen Sie mit der neuen Nachricht.
und wenn Benutzer navigieren Sie nach oben, dann wird die Seite nicht auto-scroll nach unten..

JS-code -

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 -

<div id="chat_con" class="chat_screen">
</div>

InformationsquelleAutor Gaurav Saini

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.