发送新消息时向下滚动到底部

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

因为正确的解决方案对我不起作用 ，所以我做了这样的事情：

$('.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); 。 这应该对您有用。

Answer 3

将时间间隔设置为变量，然后使用window.clearInterval()清除向下滚动时的时间间隔。

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

Answer 4

@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/