代码之家 › 专栏 › 技术社区 › Jacopo Sciampi

在底部以角2滚动的div

sass angular css javascript

1

Jacopo Sciampi · 技术社区 · 7 年前

很抱歉标题不好,我真的不知道如何用很少的词写出有意义的东西。

情况是这样的:

.element-list{
  width:100%;
  max-height: 180px;
  overflow-y: auto;
}

顶栏有一个 height 属于 20px 主包装是 200px .

在滚动的div中,在html中,有这样的内容(这对您来说是无用的,但只是为了让您更好地理解):

<div class="something" *ngFor="let data of myData">
  <div>{{data.id}}</data>
</div>

只要我在里面加些东西,这就行了 myData 反射到ngFor中,所以我看到的越来越多 <div>{{data.id}}</data> .

我试图实现的是每当有元素触发 overflow-y: auto; .

我的意思是:因为我只有很少的元素(比如说,十个元素),所以滚动条是隐藏的。但当元素超过10个时,滚动条会出现,但不会进入底部。

正如你所看到的,还有更多的元素。我想要的是,div将自动滚动到底部。因此,当任何东西被添加时,它总是这样:

有没有一种方法可以用角度或者scss/css来实现呢?

1 回复 | 直到 7 年前

1

5

Pandiyan Cool 7 年前

ngAfterViewChecked后

working sample -点击添加按钮UI进行实验

html格式

<div style="height:200px; overflow-y:auto;" #scroll>
    <div *ngFor="let i of list">
        {{i.name}}
        <br>
    </div>
</div>


<button (click)="Add()">Add</button>

<button (click)="scrollToTop()">Scroll to top</button>
<button (click)="scrollBottom()">Scroll to bottom</button>

成分

@ViewChild('scroll', { read: ElementRef }) public scroll: ElementRef<any>;

  ngAfterViewChecked() {
    this.scrollBottom()
  }

  public scrollBottom() {
    console.log(this.scroll.nativeElement.scrollTop);
    this.scroll.nativeElement.scrollTop = this.scroll.nativeElement.scrollHeight;

  }

  public scrollToTop() {
    this.scroll.nativeElement.scrollTop = 0;
  }