我有一个div，只有300像素大，我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容，需要一直向下滚动。现在如果用户决定向上滚动，我不希望它跳回底部，直到用户再次向下滚动
是否有可能有一个div，将保持滚动到底部，除非用户向上滚动，当用户滚动回底部时，它需要保持自己在底部，即使添加了新的动态内容。我该怎么做呢。
当前回答
在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接近度;，向上滚动更容易。
其他回答
//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..
$('#div1').scrollTop($('#div1')[0].scrollHeight);
Or animated:
$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);
以下是我的做法。div的高度是650px。我决定如果滚动高度在底部的150px范围内，那么自动滚动它。否则，留给用户。
if (container_block.scrollHeight - container_block.scrollTop < 800) {
container_block.scrollTo(0, container_block.scrollHeight);
}
与Bootstrap 5:
< span style=" font - family:宋体;max-height: 300 px;" > < div > <！——你这里的内容——> < / div > < / div >
我设法把它修好了。诀窍是计算:(a)当前div用户滚动位置和(b) div滚动高度，都是在附加新元素之前。
如果a === b，则在追加新元素之前就知道用户位于底部。
let div = document.querySelector('div.scrollableBox');
let span = document.createElement('span');
span.textContent = 'Hello';
let divCurrentUserScrollPosition = div.scrollTop + div.offsetHeight;
let divScrollHeight = div.scrollHeight;
// We have the current scroll positions saved in
// variables, so now we can append the new element.
div.append(span);
if ((divScrollHeight === divCurrentUserScrollPosition)) {
// Scroll to bottom of div
div.scrollTo({ left: 0, top: div.scrollHeight });
}
