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

我是如何提出这个想法的？

首先，我通过在浏览器的控制台中写入来找到要自动滚动的div的高度：

console.log($('.your-div-class').height());。
然后我找到了scrollTop值：

console.log($('.your-div-class').scrollTop());。
然后我把它放在控制台中：

$('.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);

发送新邮件时向下滚动到底部

3 个答案: