Jim Hall的答案更可取，因为当你向上滚动时，它确实不会滚动到底部，它也是纯CSS。

然而，非常不幸的是，这不是一个稳定的解决方案:在chrome(可能是由于1像素的问题由dotnetCarpenter上面描述)，scrollTop行为不准确的1像素，即使没有用户交互(在元素添加)。你可以设置scrollTop = scrollHeight - clientHeight，但是当另一个元素被添加时，这将保持div的位置，也就是“保持自己在底部”功能不再工作了。

所以，简而言之，添加少量Javascript(唉)将修复这个问题并满足所有要求:

类似于https://codepen.io/anon/pen/pdrLEZ this(示例由Coo)，在添加一个元素到列表后，还可以执行以下操作:

container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
    container.scrollTop = container.scrollHeight - container.clientHeight;
}

29是直线的高度。

因此，当用户向上滚动半行时(如果可能的话?)，Javascript将忽略它并滚动到底部。但我想这是可以忽略的。而且，它修复了Chrome 1px的东西。

这可能对你有帮助:

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

我能够得到这个工作与CSS只。

诀窍在于:

display: flex;
flex-direction: column-reverse;

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

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

这里有一个基于Ryan Hunt博客文章的解决方案。它取决于overflow-anchor CSS属性，该属性将滚动位置固定在滚动内容底部的元素上。

function addMessage() { const $message = document.createElement('div'); $message.className = 'message'; $message.innerText = `Random number = ${Math.ceil(Math.random() * 1000)}`; $messages.insertBefore($message, $anchor); // Trigger the scroll pinning when the scroller overflows if (!overflowing) { overflowing = isOverflowing($scroller); $scroller.scrollTop = $scroller.scrollHeight; } } function isOverflowing($el) { return $el.scrollHeight > $el.clientHeight; } const $scroller = document.querySelector('.scroller'); const $messages = document.querySelector('.messages'); const $anchor = document.querySelector('.anchor'); let overflowing = false; setInterval(addMessage, 1000); .scroller { overflow: auto; height: 90vh; max-height: 11em; background: #555; } .messages > * { overflow-anchor: none; } .anchor { overflow-anchor: auto; height: 1px; } .message { margin: .3em; padding: .5em; background: #eee; } <section class="scroller"> <div class="messages"> <div class="anchor"></div> </div> </section>

注意，overflow-anchor目前在Safari中不起作用。

在2020年，你可以使用css snap，但在Chrome 81之前，布局变化不会触发重新snap，纯css聊天ui在Chrome 81上工作，也可以检查我可以使用css snap。

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

.container { overflow-y:滚动; overscroll-behavior-y:包含; 滚动抓拍型:y接近度; ｝ .container > div > div:last child { scroll-snap-align:结束; ｝ .container > div > div { 背景:浅灰色; 高度:3快速眼动; 字体大小:1.5快速眼动; ｝ .container > div > div:n -child(2n) { 背景:灰色; ｝ <div class="container" style="height:6rem"> < div > < div > < / div > 1 2 < div > < / div > < div > 3 < / div > 4 < div > < / div > 5 < div > < / div > < / div > < / div >

EDIT

使用scroll-snap类型:y接近度;，向上滚动更容易。

我发现最友好的解决方案是将滚动-快照-对齐方法与少量Javascript结合起来。前一种解决方案本身的问题是，抓拍太强了，你必须滚动很远才能摆脱它。

相反，我们可以在容器滚动到底部时使用捕捉动态，然后在用户向上滚动超过某个阈值时禁用它。

这个解决方案还有一个额外的好处，那就是它是一个渐进的增强:如果用户禁用了Javascript，它就会退回到只使用css的方法。

const container = document.getElementById("container"); const snap = document.getElementById("snap"); // Scroll the view to the bottom once initially container.scrollTop = container.scrollHeight; container.addEventListener("scroll", (event) => { const target = event.currentTarget; const scroll = target.scrollTop; const maxScroll = target.scrollHeight - target.clientHeight; const threshold = 50; // px isScrollBottomedOut = maxScroll - scroll < threshold; // If the user scrolls up more than the threshold, disable snapping // If the user scrolls down again, reenable snapping snap.style.display = isScrollBottomedOut ? "block" : "none"; }); #container { width: 200px; height: 500px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; -ms-scroll-chaining: none; overscroll-behavior: contain; -ms-scroll-snap-type: y proximity; scroll-snap-type: y proximity; border: 2px solid black; } #snap { scroll-snap-align: end; } <div id="container"> <ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> <!-- This is the snapping target, if visible --> <div id="snap"></div> </div>