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

希望我已经解释了总体思路。这种方法对我来说很好。通过事件反跳可以改善用户滚动侦听。并且不要忘记处理滚动事件和变异观察者订阅。

Answer 2

这就是我在项目中使用的内容。它适用于IE，Edge，Firefox，Chrome和Opera。我不确定Safari。

var a = document.querySelector('#divchat');
a.scrollIntoView(false);

希望对您有帮助。

Answer 3

这个问题有很多答案。

这是Automatically scroll down chat div

中的一员

答案的重点是可以操纵变量scrollHeight，scrollTop和clientHeight。

但基本上，要向下滚动它是使用container.scrollTop = container.scrollHeight;

添加新数据后如何使滚动条停留在底部

3 个答案: