我有一个div,只有300像素大,我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容,需要一直向下滚动。现在如果用户决定向上滚动,我不希望它跳回底部,直到用户再次向下滚动

是否有可能有一个div,将保持滚动到底部,除非用户向上滚动,当用户滚动回底部时,它需要保持自己在底部,即使添加了新的动态内容。我该怎么做呢。


当前回答

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

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

其他回答

$('#div1').scrollTop($('#div1')[0].scrollHeight);

Or animated:

$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);

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

诀窍在于:

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

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

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

这个问题有原生的支持。

有一个叫做*. 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>

在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接近度;,向上滚动更容易。

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

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