如何使滚动条在添加新数据时保持在底部

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

要更改isLock标志，我必须监听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

这个问题有很多答案。

这是其中之一 自动向下滚动聊天div

这个答案的要点是变量scrollHeight，scrollTop和clientHeight可以纵。

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