Scrollen Sie nach unten, wenn eine neue Nachricht gesendet wird

Question

Ich habe ein Kommentarfeld und ich benutze folgende JS, um nach unten zu blättern und nach unten zu blättern, wenn neue Nachricht gepostet wird.

window.setInterval(function() { 
    var elem = document.getElementById('Commentbox'); 
    elem.scrollTop = elem.scrollHeight; 
}, 500); 

Es Art funktioniert, wenn eine neue Nachricht es scrollt nach unten geschrieben wird, aber wenn ich auf alte Nachrichten schauen nach oben, um es scrollt mich wieder nach unten. Gibt es eine Möglichkeit, dies zu verhindern?

Answer 1

Ich würde keine Intervallfunktion verwenden, um nach unten zu scrollen, weil Sie alle 500 Millis mit Ihrer Implementierung scrollen. Ich glaube, Sie haben eine Funktion, die neuen Nachrichten hinzufügt und auf eingehende Nachrichten genannt:

function addMessage() { 
    // here you add the new message to DOM 
    // ... 

    // then you can scroll down once to show the new messages 
    var elem = document.getElementById('Commentbox'); 
    elem.scrollTop = elem.scrollHeight; 
} 

Wenn Sie den Code schreiben, wie Sie Ihre neue Nachrichten hinzuzufügen, kann ich Ihnen helfen, besser.

Answer 2

Legen Sie das Intervall als Variable fest und löschen Sie dann das Intervall, wenn das Abwärtsscrollen mit window.clearInterval() abgeschlossen ist.

Answer 3

@Wowsk hat eine gute Antwort, aber Ihre Follow-up-Frage klingt, als ob Sie nach einem kleinen Unterschied in der Funktionalität suchen. Ich denke, das sollte dich dahin bringen, aber ich habe es noch nicht getestet.

var lastScrollTop = 0; 
var elem = document.getElementById('Commentbox'); 

var timer = window.setInterval(function() { 
    elem.scrollTop = elem.scrollHeight; 
    lastScrollTop = elem.scrollTop 
}, 500); 

elem.addEventListener("scroll", function(){ 
    if(lastScrollTop < elem.scrollTop){ 
     window.clearInterval(timer); 
    } 
}, false); 

Ich ging einfach weiter und testete ihn vor der Veröffentlichung, hoffe, es hilft - auf die Geige verweisen: https://jsfiddle.net/condorhauck/ak1L12pd/1/

Answer 4

Da die richtige Lösung nicht für mich, arbeitete habe ich etwas wie folgt aus:

$('.your-div-class').scrollTop($('.your-div-class').height()*$('.your-div-class').height());

Wie ich auf die Idee kam?

1. Zuerst fand ich die Höhe des div ich auto-scroll wollen, indem sie in der Konsole des Browsers zu schreiben:

   console.log($('.your-div-class').height());.

2. Dann fand ich den scrollTop Wert:

   console.log($('.your-div-class').scrollTop());.

3. Dann habe ich dies in der Konsole:

   $('.your-div-class').scrollTop($('.your-div-class').height()*$('.your-div-class').height());,

   und fand heraus, dass es nimmt mich nur auf halben Weg nach unten und realisiert,

   $('.your-div-class').scrollTop($('.your-div-class').height()*$('.your-div-class').height());

   würde ich gescrollt nehmen genug nach unten.

Wenn es für Sie nicht arbeiten. Sie können verwenden: $('.your-div-class').scrollTop($('.your-div-class').height()*1000);. Dies sollte für Sie gut funktionieren.