我只能使用 CSS 来实现它。

诀窍是使用display: flex;和flex-direction: column-reverse;

浏览器将底部视为顶部。假设您的目标浏览器支持 support flex-box，唯一需要注意的是标记必须以相反的顺序排列。

这是一个工作示例。https://codepen.io/jimbol/pen/YVJzBg

这可能会帮助您：

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[编辑]，匹配评论...

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

每当添加内容时，调用函数 updateScroll()，或设置一个计时器：

//once a second
setInterval(updateScroll,1000);

如果您只想在用户未移动时更新：

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});

我刚刚实现了这个，也许你可以使用我的方法。

假设我们有以下 HTML：

<div id="out" style="overflow:auto"></div>

然后我们可以检查它是否滚动到底部：

var out = document.getElementById("out");
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;

scrollHeight为您提供元素的高度，包括由于溢出而导致的任何不可见区域。clientHeight为您提供 CSS 高度或换句话说，元素的实际高度。这两种方法都返回没有 的高度margin，所以你不必担心。scrollTop为您提供垂直滚动的位置。0 是顶部，max 是元素的滚动高度减去元素本身的高度。使用滚动条时，将滚动条一直拖到底部可能很困难（对我来说是在 Chrome 中）。所以我抛出了 1px 的误差。因此，isScrolledToBottom将真实的，即使滚动条从底部1px的。您可以将其设置为您认为合适的任何内容。

那么只需将元素的 scrollTop 设置为底部即可。

if(isScrolledToBottom)
    out.scrollTop = out.scrollHeight - out.clientHeight;

我为你制作了一个小提琴来展示这个概念：http : //jsfiddle.net/dotnetCarpenter/KpM5j/

编辑：添加了代码片段以阐明何时isScrolledToBottom是true。

将滚动条粘到底部

const out = document.getElementById("out")
let c = 0

setInterval(function() {
    // allow 1px inaccuracy by adding 1
    const isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1

    const newElement = document.createElement("div")

    newElement.textContent = format(c++, 'Bottom position:', out.scrollHeight - out.clientHeight,  'Scroll position:', out.scrollTop)

    out.appendChild(newElement)

    // scroll to bottom if isScrolledToBottom is true
    if (isScrolledToBottom) {
      out.scrollTop = out.scrollHeight - out.clientHeight
    }
}, 500)

function format () {
  return Array.prototype.slice.call(arguments).join(' ')
}

#out {
    height: 100px;
}

<div id="out" style="overflow:auto"></div>
<p>To be clear: We want the scrollbar to stick to the bottom if we have scrolled all the way down. If we scroll up, then we don't want the content to move.
</p>

在 2020 年，您可以使用css snap，但在 Chrome 81 之前，布局更改不会触发 re-snap，纯 css chat ui可在 Chrome 81 上运行，您也可以查看Can I use CSS snap。

如果可见，此演示将捕捉最后一个元素，滚动到底部以查看效果。

.container {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-snap-type: y proximity;
}

.container > div > div:last-child {
  scroll-snap-align: end;
}

.container > div > div {
  background: lightgray;
  height: 3rem;
  font-size: 1.5rem;
}
.container > div > div:nth-child(2n) {
  background: gray;
}

<div class="container" style="height:6rem">
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>

编辑

使用scroll-snap-type: y proximity;，向上滚动更容易。

$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

现场演示：http : //jsfiddle.net/KGfG2/