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

Scroll down to bottom when new message is sent

本文关键字：滚动 底部 新信息 信息      更新时间：2024-06-04

我有一个评论框，我使用下面的JS将滚动设置为底部，并在发布新消息时向下滚动。

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

这有点奏效，当一条新消息发布时，它会向下滚动，但当我向上滚动查看旧消息时，它又会向下滚动。有没有办法防止这种情况发生？

我不会使用interval函数向下滚动，因为您的实现每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;
}

如果你发布代码如何添加你的新消息，我可以更好地帮助你。

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

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

我是怎么想到这个主意的

  1. 首先，我在浏览器的控制台中写下了我想自动滚动的div的高度：

    CCD_ 2。

  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);。这对你来说应该很好。

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

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

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

相关文章：