$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;

这将使用$(document).height()属性从#yourDivID的高度计算滚动顶部位置，这样即使在div中添加了动态内容，滚动条也将始终位于底部位置。希望这能有所帮助。但它也有一个小错误，即使我们向上滚动并将鼠标指针从滚动条上保留下来，它也会自动回到底部位置。如果有人能纠正这一点，那就太好了。

. cont { 高地:100px; overflow-x:隐藏; overflow-y: auto; 用金币:rotate (180deg); 方向:rtl级; text-align:向左拐; 的 申{ 溢出:隐藏; 用金币:rotate (180deg); 的 < div级= cont”> <德> < li > 0 < / li > < li > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < li > 5 < / li > < li > 6 < / li > < li > 7 < / li > < li > 8 < / li > < li > 9 < / li > < li > 10 < / li > < /德> < / div >

单击Run代码片段查看效果。(如果运行代码片段不起作用，请尝试以下方法:https://jsfiddle.net/Yeshen/xm2yLksu/3/。)

工作原理:默认情况下溢出滚动是从上到下。Transform: rotate(180deg)将此反转，因此滚动或加载动态块是从下到上的。

创意:https://blog.csdn.net/yeshennet/article/details/88880252

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

诀窍在于:

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

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

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

以下是我的做法。div的高度是650px。我决定如果滚动高度在底部的150px范围内，那么自动滚动它。否则，留给用户。

if (container_block.scrollHeight - container_block.scrollTop < 800) {
                    container_block.scrollTo(0, container_block.scrollHeight);
}

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的东西。

这里有一个基于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中不起作用。