javascript - div that scroll at the bottom in Angular2 - Stack Overflow

admin管理员组

文章数量:1332383

Sorry for the bad title, I really have no idea on how to write something that has sense in few words.

the situation is like this:

The div that scroll has this css:

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

the topBar has an height of 20px and the main wrapper is of 200px.

Inside the div that scroll, in the html, there is something like this (that's useless to you, but just for letting you understand better) :

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

This works fine, whenever I add something into myData is reflected into the ngFor so I see more and more <div>{{data.id}}</data>.

What I'm trying to achieve is to automatic scroll at the bottom whenever there are elements that trigger the overflow-y: auto;.

What I mean is: Since I have few elements(let's say, for example, ten elements), the scroll-bar is hidden. but when the elements are more than ten, the scroll bar appears, but it doesn't go to the bottom.

Like this:

As you can see there are more element. What I want, is that the div will auto-scroll to the bottom. So whenevener something is added it will always be like this:

Is there a way to do it in Angular or by scss/css?

Sorry for the bad title, I really have no idea on how to write something that has sense in few words.

the situation is like this:

The div that scroll has this css:

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

the topBar has an height of 20px and the main wrapper is of 200px.

Inside the div that scroll, in the html, there is something like this (that's useless to you, but just for letting you understand better) :

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

This works fine, whenever I add something into myData is reflected into the ngFor so I see more and more <div>{{data.id}}</data>.

What I'm trying to achieve is to automatic scroll at the bottom whenever there are elements that trigger the overflow-y: auto;.

What I mean is: Since I have few elements(let's say, for example, ten elements), the scroll-bar is hidden. but when the elements are more than ten, the scroll bar appears, but it doesn't go to the bottom.

Like this:

As you can see there are more element. What I want, is that the div will auto-scroll to the bottom. So whenevener something is added it will always be like this:

Is there a way to do it in Angular or by scss/css?

• javascript
• css
• angular
• sass

Share Follow edited Oct 1, 2018 at 12:44 Pandiyan Cool 6,58588 gold badges5353 silver badges9090 bronze badges asked Sep 19, 2018 at 15:07 Jacopo SciampiJacopo Sciampi 3,45311 gold badge2424 silver badges5151 bronze badges 2

• you can surely hook into the data-added event and then use element.scrollIntoView() – Synoon Commented Sep 19, 2018 at 15:47
• Ya like, synoon says, I'd say just fire off a method if .length is greater than 3 or something that just does document.getElementByClass('element-list').scrollIntoView(false); or use elementref, whatever... – Chris W. Commented Sep 19, 2018 at 16:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

call scrollBottom() after view pleted using ngAfterViewChecked

working sample - click add button UI to experiment

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>

ponent

@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;
  }

本文标签： javascriptdiv that scroll at the bottom in Angular2Stack Overflow