CSS解决方案

CSS解决方案 - 始终将溢出文档滚动到底部(CSS solution - always scroll overflow doc to bottom)

我有一个overflow: scroll的div overflow: scroll ，我希望它总是沿着Y轴滚动到底部，不管它有什么内容。 （想想一个聊天线程，它总是在最下面显示最新消息。）

我看到有一些jQuery解决方案在添加新消息时将div滚动到其高度，但我想知道是否有任何纯CSS解决方案？

谢谢！

I have a div that has overflow: scroll, and I want it to always scroll to bottom along Y-axis no matter what content it has. (think about a chat thread, which always displays the latest message at the bottom.)

I saw there are some jQuery solutions that scrolls the div to its height when new messages get added, but I am wondering if there's any pure CSS solution to this?

Thank you!

最满意答案

遗憾的是，纯CSS不可能，但您可以使用纯js来获取elem.scrollHeight元素的总可滚动高度，并使用elem.scrollHeight将元素滚动到该位置

你可以在这个例子中看到

js代码是：

var elem = document.querySelector("theElementClass"); var elemHeight = elem.scrollHeight; elem.scrollTop = elemHeight;

希望这可以帮助。 = d

Unfortunately, not possible with pure CSS but you can use pure js to get the total scrollable height of element with elem.scrollHeight and scroll the element to that position with elem.scrollTop

you can see in this example

the js code is:

var elem = document.querySelector("theElementClass"); var elemHeight = elem.scrollHeight; elem.scrollTop = elemHeight;

hope this helps. =D