我有一个div，只有300像素大，我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容，需要一直向下滚动。现在如果用户决定向上滚动，我不希望它跳回底部，直到用户再次向下滚动
是否有可能有一个div，将保持滚动到底部，除非用户向上滚动，当用户滚动回底部时，它需要保持自己在底部，即使添加了新的动态内容。我该怎么做呢。
当前回答
你可以用这样的东西，
var element = document.getElementById("yourDivID");
window.scrollTo(0,element.offsetHeight);
其他回答
//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..
在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接近度;，向上滚动更容易。
这可能对你有帮助:
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;
});
这个问题有原生的支持。
有一个叫做*. scrollintoview的方法。 在运行此方法一次之后，它将容器滚动保持在底部。 即使在容器中添加了新内容，它也会滚动到底部。
import {
AfterViewInit,
Directive,
ElementRef,
} from '@angular/core';
@Directive({
selector: '[aeScrollIntoView]',
})
export class ScrollIntoViewDirective implements AfterViewInit {
constructor(private readonly el: ElementRef<HTMLDivElement>) {}
ngAfterViewInit(): void {
this.el.nativeElement.scrollIntoView({ behavior: 'smooth' });
}
}
<div aeScrollIntoView>
Your long and dynamic content.
Whenever new content is added to this container, it scrolls to the bottom.
<div>
$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;
这将使用$(document).height()属性从#yourDivID的高度计算滚动顶部位置，这样即使在div中添加了动态内容，滚动条也将始终位于底部位置。希望这能有所帮助。但它也有一个小错误，即使我们向上滚动并将鼠标指针从滚动条上保留下来，它也会自动回到底部位置。如果有人能纠正这一点，那就太好了。
