javascript - 新增数据时如何让滚动条一直在底部

Question

你好程序员!我正在编写一个聊天系统，我希望滚动条保持在底部。这样，当有人发送消息时，用户就不必向下滚动。我还希望它从页面加载的底部开始。此外，用户可以在需要时向上滚动，但当他们向下滚动时，它会锁定到位。我已经尝试了很多次，但由于某种原因它不起作用，我想知道是否有人有这样做的方法？

Answer 1

一段时间以来，我也一直在努力实现它。我最终采用的方法依赖于使用 MutationObservable

MutationObservable 允许监视元素内部的 DOM 变化，并在深层嵌套元素发生变化时执行一些操作(例如，在您的情况下，呈现了新评论):

// chatContainer is reference to your chatContainer element
var isLocked = true;

var mutationObserver = new MutationObserver(() => {
    if (isLocked) {
        scrollToBottom();
    }
});

mutationObserver.observe(chatContainer, {
    childList: true,
    subtree: true,
    attributes: false,
});

这给了我一个回调，我可能不得不让 chatContainer 滚动到底部。

滚动到底部的实现可以是:

function scrollToBottom() {
    chatContainer.scrollTop = 99999999999;
}

要更改 isLocked 标志，我必须监听用户在 chatContainer 上的滚动并相应地更新它:

var LOCK_OFFSET = 25; // how many pixels close to bottom consider scroll to be locked
chatContainer.addEventListener('scroll', handleUserScroll);

function handleUserScroll() {
    var scrollFromBottom =
        chatContainer.scrollHeight -
        chatContainer.scrollTop -
        chatContainer.clientHeight; // how many pixels user scrolled up from button of the chat container.

    isLocked = scrollFromBottom > LOCK_OFFSET; // set new isLocked. lock, if user is close to the bottom, and unlock, if user is far from the bottom. 
});

希望我已经解释了总体思路。这种方法对我很有效。应该通过事件去抖来改进用户滚动监听。并且不要忘记处理滚动事件和变异观察者订阅。