Chat Box Scoll nach unten

Question

Ich habe hier eine Lösung auf Stackoverflow gefunden, aber ich kann es nicht

... 
<div class="panel-body"> 
    <ul id="mtchat" class="chat"> 

    </ul> 
</div> 
... 

Und hier die js bekommen arbeiten sie die neue <li> fügt aber Scrollen funktioniert nicht

worker(); 

function worker() { 

    // ajax request deleted 

    updateChat(); 
    setTimeout(worker, 1000); 

}; 

function updateChat() { 

    $('#mtchat').append('<li class="right clearfix">Hallo</li>'); 

    var height = $('#mtchat')[0].scrollHeight; 
    var dheight = $('#mtchat').height(); 
    var scrolling = height - dheight; 
    $('#mtchat').scrollTop(scrolling); 
    console.log('height:'+height); 
    console.log('dheight:'+dheight); 

} 

in der Konsole kann ich ScrollHeight sehen und Höhe ist immer gleich, auch wenn der Überlauf beginnt.

ich ein jsbin http://jsbin.com/qucenufiqa/edit?html,js,output

Answer 1

prüfen diese jsfiddle gemacht haben: https://jsfiddle.net/9dqsoh3b/

Hier drin Arbeiter() -Methode wurde nur einmal aufgerufen und diese im Gegenzug setzt gerade oben für uns das Zeug:

• Hinzufügen eines „Hallo“ als willkommene Nachricht, nur einmal
• Zuordnung der Handler für Schaltfläche klicken
• Timer für die Aktualisierung der Chat-Box

Code:

function worker() { 

    $('#mtchat').append('<li class="right clearfix">Hallo</li>'); 
    // ajax request deleted 
    setTimeout(updateChat(), 1000); 
    $("#btn-chat").on("click", function(){ 
    var text = $('#btn-input'); 
    $('#mtchat').append('<li class="right clearfix">'+ text.val() +'</li>'); 
    text.val(''); 
    }); 
}; 

function updateChat() { 
    var height = document.getElementById('mtchat').scrollHeight; - $('#mtchat').height(); 
    $('#mtchat').scrollTop(height); 
} 

Answer 2

Ihre JS Bin beinhaltet nicht die jQuery-Bibliothek im Kopf.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 

Fügen Sie die oben im head Tag

Auch die folgende Zeile wie folgt festzusetzen:

var height = document.getElementById('mtchat').scrollHeight; - $('#mtchat').height(); 

zu

var height = $('#mtchat')[0].scrollHeight - $('#mtchat').height(); 

$('#mtchat')[0].scrollHeight ist jquery Weise document.getElementById('mtchat').scrollHeight des Schreibens

Da Sie jquery überall sonst verwenden.

Answer 3

Ich habe jetzt herausgefunden .panel Körper-Überlauf wurde die Absicht, aber ich überprüfte die Scrollheight des <ul> im div.panel Körper