Прокрутите вниз донизу при отправке нового сообщения

Question

У меня есть окно комментариев, и я использую следующий JS, чтобы установить прокрутку вниз, и для нее прокрутка вниз при появлении нового сообщения.

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

Это вид работы, когда новое сообщение она прокручивается вниз, но когда я прокручиваю, чтобы посмотреть на старые сообщения, которые он прокручивает меня обратно. Есть ли способ предотвратить это?

Answer 1

Я бы не использовал функцию интервалов для прокрутки вниз, заставляя вас прокручивать каждые 500 миллисов с вашей реализацией. Я думаю, что у вас есть функция, которая добавляет новые сообщения и вызываются на входящих сообщениях:

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

Если вы разместите код, как вы добавляете новые сообщения, я могу помочь вам лучше.

Answer 2

Установите интервал как переменную, а затем очистите интервал при завершении прокрутки, используя window.clearInterval().

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

Answer 3

@Wowsk имеет хороший ответ, но ваш следующий вопрос звучит так, будто вы ищете небольшую разницу в функциональности. Я думаю, что это должно доставить тебя туда, но я еще не проверял его.

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

Я просто пошел вперед и проверил его, прежде чем отправлять, надеюсь, что это помогает - обратитесь к скрипке: https://jsfiddle.net/condorhauck/ak1L12pd/1/

Answer 4

Поскольку правильное решение не работает для меня, я сделал что-то вроде этого:

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

Как я пришел с идеей?

1. Сначала я нашел высоту DIV я хочу автоматической прокрутки, написав в консоли браузера:

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

2. Тогда я нашел значение scrollTop:

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

3. Тогда я положил это в консоли:

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

   и выяснили, что это только берет меня на полпути вниз и понял,

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

   бы меня прокручивается достаточно вниз.

Если это не работает для вас. Вы можете использовать: $('.your-div-class').scrollTop($('.your-div-class').height()*1000);. Это должно сработать для вас просто отлично.