我有一个只有300像素大的div，当页面加载滚动到内容的底部时我想要它。此div具有动态添加到其中的内容，需要始终保持滚动状态。现在，如果用户决定向上滚动，我不希望它跳回到底部，直到用户再次向下滚动
除非用户向上滚动，当用户向后滚动到底部时，即使添加了新的动态内容，它也需要保持在底部，否则可以使div保持滚动到底部。我该如何创造这个呢？
这可能对您有所帮助：
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是top，max是元素的scrollHeight减去元素高度本身。使用滚动条时，将滚动条一直向下移动可能很困难（我在Chrome中）。所以我投入1px不准确。所以即使滚动条从底部开始是1px，isScrolledToBottom也会成立。您可以将此设置为适合您的任何内容。
然后，只需将元素的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>我只能使用CSS。
诀窍是使用display: flex;和flex-direction: column-reverse;
浏览器将底部视为顶部。假设您的目标浏览器支持flex-box，唯一需要注意的是标记必须按相反的顺序排列。
这是一个有效的例子。 https://codepen.io/jimbol/pen/YVJzBg
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);
$('#div1').scrollTop($('#div1')[0].scrollHeight);
Or animated:
$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);
$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;
这将使用#yourDivID属性从$(document).height()的高度计算ScrollTop位置，这样即使将动态内容添加到div，滚动器也将始终位于底部位置。希望这可以帮助。但它也有一个小错误，即使我们向上滚动并从滚动条离开鼠标指针它会自动到达底部位置。如果有人能够纠正它也会很好。
//Make sure message list is scrolled to the bottom
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;
container.scrollTop = contentHeight - containerHeight;
这是我的版本基于dotnetCarpenter的答案。我的方法是一个纯粹的jQuery，我命名变量使事情更清楚。发生的事情是，如果内容高度大于容器，我们向下滚动额外的距离以达到所需的结果。
适用于IE和Chrome ..
Jim Hall的答案是可取的，因为虽然当你向上滚动时确实没有滚动到底部，但它也是纯CSS。
然而非常不幸的是，这不是一个稳定的解决方案：在chrome中（可能是由于上面的dotnetCarpenter描述的1-px问题），scrollTop表现不准确1个像素，即使没有用户交互（在元素添加时）。你可以设置scrollTop = scrollHeight - clientHeight，但是当添加另一个元素时，这将使div保持在位，也就是说“保持在底部”功能不再起作用。
因此，简而言之，添加少量Javascript（叹气）将解决此问题并满足所有要求：
像https://codepen.io/anon/pen/pdrLEZ这样的东西（例如Coo），并且在向列表添加元素之后，还有以下内容：
container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
container.scrollTop = container.scrollHeight - container.clientHeight;
}
其中29是一条线的高度。
那么，当用户向上滚动半行（如果可能的话？）时，Javascript将忽略它并滚动到底部。但我想这是可以忽略的。而且，它修复了Chrome 1 px的问题。
.cont{
height: 100px;
overflow-x: hidden;
overflow-y: auto;
transform: rotate(180deg);
direction:rtl;
text-align:left;
}
ul{
overflow: hidden;
transform: rotate(180deg);
}<div class="cont">
<ul>
<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>
</ul>
</div>Run code snippet看到效果。 （PS：如果Run code snippet不工作，试试这个：https://jsfiddle.net/Yeshen/xm2yLksu/3/）默认溢出从上到下滚动。
transform: rotate(180deg)可以使其从下到上滚动或加载动态块。