My users can add entries to the bottom of a scrolling list. However, the scrollbar doesn't automatically move down when the entry is added, so the user can't see their newly added entry. How can I keep my scrollbar always in the most scrolled-down position to show the latest entries (using Angular 5)?

My users can add entries to the bottom of a scrolling list. However, the scrollbar doesn't automatically move down when the entry is added, so the user can't see their newly added entry. How can I keep my scrollbar always in the most scrolled-down position to show the latest entries (using Angular 5)?

• javascript
• html
• angular

Share Improve this question Follow edited May 7, 2018 at 13:25 Martin Parenteau 73.8k1313 gold badges134134 silver badges155155 bronze badges asked May 7, 2018 at 6:26 FiringBlanksFiringBlanks 2,08444 gold badges3434 silver badges5151 bronze badges 7

• 1 you want to automatically scroll down to the most viewed content is it? – Lakindu Gunasekara Commented May 7, 2018 at 6:27
• can you share the code, how your are trying to scroll to the latest entry? – Rajeev Ranjan Commented May 7, 2018 at 6:30
• There are many many many related topics about this if you do a simple search – Carsten Commented May 7, 2018 at 6:31
• Possible duplicate of Scroll to the top of the page using JavaScript/jQuery? – Carsten Commented May 7, 2018 at 6:32
• Might help you out w3schools./jsref/… – Pardeep Jain Commented May 7, 2018 at 6:33

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 13

You can scroll the new entry into view by setting focus on it, as shown in this stackblitz.

• The item elements can be focused if they have a tabindex attribute
• They should also have the style attribute outline: none (to remove the focus outline)
• A template reference variable should be set on the item elements (e.g. #mentDiv)
• The changes to the list are monitored with ViewChildren and the QueryList.changes event
• When a change on the list is detected, the focus is set on the last element of the list

---

HTML:

<textarea [(ngModel)]="newComment"></textarea>
<div>
    <button (click)="addComment()">Add ment to list</button>
</div>
<div>
  Comments
</div>
<div class="list-container">
    <div tabindex="1" #mentDiv class="ment-item" *ngFor="let ment of ments">
        {{ ment }}
    </div>
</div>

CSS:

div.list-container {
  height: 150px; 
  overflow: auto;
  border: solid 1px black;
}

div.ment-item {
  outline: none;
}

Code:

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';
...    
export class AppComponent {

  @ViewChildren("mentDiv") mentDivs: QueryList<ElementRef>;

  ments = new Array<string>();
  newComment: string = "Default ment content";

  ngAfterViewInit() {
    this.mentDivs.changes.subscribe(() => {
      if (this.mentDivs && this.mentDivs.last) {
        this.mentDivs.last.nativeElement.focus();
      }
    });
  }

  addComment() {
    this.ments.push(this.newComment);
  }
}