javascript - Scroll Top not working correctly in angular2 - Stack Overflow

admin管理员组

文章数量:1292175

I have created a table where rows get populated dynamically. I have a add button where i can add rows as well. Here i want to show newly added row in the table at the bottom after i add an row,so i am using the below code is ponent.ts.

this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;

But the above code doesn't seems to work properly. The problem is that when i add a new row,scroll is not pletely going to the bottom of div tag, hence new row cannot be seen.

Below is my html code where i am using a table inside a div tag as shown below.

<div style="height:200px;overflow-y:auto">
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="d-flex">
            <th class="col-3">Q.No</th>
            <th class="col-4">Record Answer</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let answer of answerPaper; let i = index" class="d-flex">
            <td class="col-3">answer.no</td>
            <td class="col-4">answer.name</td>
        </tr>
        </tbody>
    </table>
</div>
<button (click)="addrow()">Add Row</button>

Below is the ponent.ts

public addRow(){
    this.answerPaper.push({});
}

I am posting the image of scrollbar also.

When i add a new row,scroll bar is not pletely moving to the bottom of div hence newly added row is not seen pletely

Am i going wrong somewhere?

I have created a table where rows get populated dynamically. I have a add button where i can add rows as well. Here i want to show newly added row in the table at the bottom after i add an row,so i am using the below code is ponent.ts.

this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;

But the above code doesn't seems to work properly. The problem is that when i add a new row,scroll is not pletely going to the bottom of div tag, hence new row cannot be seen.

Below is my html code where i am using a table inside a div tag as shown below.

<div style="height:200px;overflow-y:auto">
    <table class="table table-bordered table-hover">
        <thead>
        <tr class="d-flex">
            <th class="col-3">Q.No</th>
            <th class="col-4">Record Answer</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let answer of answerPaper; let i = index" class="d-flex">
            <td class="col-3">answer.no</td>
            <td class="col-4">answer.name</td>
        </tr>
        </tbody>
    </table>
</div>
<button (click)="addrow()">Add Row</button>

Below is the ponent.ts

public addRow(){
    this.answerPaper.push({});
}

I am posting the image of scrollbar also.

When i add a new row,scroll bar is not pletely moving to the bottom of div hence newly added row is not seen pletely

Am i going wrong somewhere?

• javascript
• html
• angular

Share Follow edited Aug 25, 2018 at 0:58 Pandiyan Cool 6,58588 gold badges5353 silver badges9090 bronze badges asked Aug 21, 2018 at 12:40 coder12349coder12349 49133 gold badges1313 silver badges2626 bronze badges 1

• use this this.document.body.scrollTop = 0; – Kiran Joshi Commented Aug 21, 2018 at 12:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Call your scroll to top or bottom once angular element is ready

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

  ngAfterViewChecked() {
    this.scrollBottom()
  }

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

SLACKBLITZ

In my case I wanted to scroll down on a ment list when a new ment is added.
But the logic is the same.
I define a variable scrollDown: number; and I recover the ment list like this:

@ViewChild('mentList') mentList: ElementRef;

Then, when the ment is added:

this.scrollDown = this.mentList.nativeElement.scrollHeight;

Finally, in the template:

<div #mentList class="document-ments-list" [scrollTop]="scrollDown">

[Temp quick fix] Adding timer worked for me,

ngAfterViewChecked() {
  setTimeout(this.scrollBottom(), 500)
}

本文标签： javascriptScroll Top not working correctly in angular2Stack Overflow