Выделите элемент из машинописного кода (угловой 5)

Question

У меня есть div в середине экрана.Div содержит кнопку отправки.Когда я нажимаю кнопку «Отправить», расположение экрана падает вниз.Я пытался прокрутить элемент с помощью window.scrollTo (), но он не работает.Мне нужно сделать это из component.ts, у меня есть событие, которое вызывается при нажатии кнопки отправки.Буду очень признателен за помощь.

Answer 1

Для этого я использую ванильный JavaScript с использованием Div Div

component.ts

window.scrollTo(0, document.getElementById("youDiv").scrollHeight);

Answer 2

Я нашел другой подход для этого.Для кого-то это может быть полезно, так что вот еще один способ:

component.ts

  someEvent(event: any): void
  {
    this.scrollToAnchor('scrollAnchor');
  }

  scrollToAnchor(divId: string): void
  {
    const element = document.getElementById(divId);
    if (element)
    {
      setTimeout(() => {
        element.scrollIntoView(true);
      }, 0);
    }
  }

component.html

<div id="scrollAnchor"></div>

Answer 3

используйте силу зрения ребенка

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

  ngAfterViewChecked() {
    this.scrollBottom()
  }

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

slackblitz link

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>

компонент

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

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



  list = [{ name: 'Nam porta orci sed enim imperdiet, et vulputate erat luctus. Integer a tortor blandit, eleifend velit id, eleifend libero. Quisque quis congue ex, vitae suscipit ipsum. Aliquam felis enim, bibendum vel dolor et, dapibus fringilla felis. Sed magna ipsum, congue molestie nisl non, commodo pellentesque felis. Mauris hendrerit rhoncus turpis, at lacinia metus finibus eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ligula risus, tincidunt ac diam vehicula, fringilla blandit sapien. Ut dictum a nunc id tempus. Nulla sed felis id quam hendrerit volutpat eget at velit. Praesent finibus, mauris ac molestie laoreet, erat est mattis velit, ac tincidunt nulla enim ac felis. In hac habitasse platea dictumst. Nam neque nibh, tempus a velit a, porttitor finibus quam. Nunc pharetra est eget urna mollis, sed facilisis eros pulvinar. Duis ac metus egestas, malesuada ligula eu, congue magna.Nam porta orci sed enim imperdiet, et vulputate erat luctus. Integer a tortor blandit, eleifend velit id, eleifend libero. Quisque quis congue ex, vitae suscipit ipsum. Aliquam felis enim, bibendum vel dolor et, dapibus fringilla felis. Sed magna ipsum, congue molestie nisl non, commodo pellentesque felis. Mauris hendrerit rhoncus turpis, at lacinia metus finibus eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ligula risus, tincidunt ac diam vehicula, fringilla blandit sapien. Ut dictum a nunc id tempus. Nulla sed felis id quam hendrerit volutpat eget at velit. Praesent finibus, mauris ac molestie laoreet, erat est mattis velit, ac tincidunt nulla enim ac felis. In hac habitasse platea dictumst. Nam neque nibh, tempus a velit a, porttitor finibus quam. Nunc pharetra est eget urna mollis, sed facilisis eros pulvinar. Duis ac metus egestas, malesuada ligula eu, congue magna.Nam porta orci sed enim imperdiet, et vulputate erat luctus. Integer a tortor blandit, eleifend velit id, eleifend libero. Quisque quis congue ex, vitae suscipit ipsum. Aliquam felis enim, bibendum vel dolor et, dapibus fringilla felis. Sed magna ipsum, congue molestie nisl non, commodo pellentesque felis. Mauris hendrerit rhoncus turpis, at lacinia metus finibus eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ligula risus, tincidunt ac diam vehicula, fringilla blandit sapien. Ut dictum a nunc id tempus. Nulla sed felis id quam hendrerit volutpat eget at velit. Praesent finibus, mauris ac molestie laoreet, erat est mattis velit, ac tincidunt nulla enim ac felis. In hac habitasse platea dictumst. Nam neque nibh, tempus a velit a, porttitor finibus quam. Nunc pharetra est eget urna mollis, sed facilisis eros pulvinar. Duis ac metus egestas, malesuada ligula eu, congue magna.' }];



  public Add() {
    this.list.push({ name: 'Nam porta orci sed enim imperdiet, et vulputate erat luctus. Integer a tortor blandit, eleifend velit id, eleifend libero. Quisque quis congue ex, vitae suscipit ipsum. Aliquam felis enim, bibendum vel dolor et, dapibus fringilla felis. Sed magna ipsum, congue molestie nisl non, commodo pellentesque felis. Mauris hendrerit rhoncus turpis, at lacinia metus finibus eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ligula risus, tincidunt ac diam vehicula, fringilla blandit sapien. Ut dictum a nunc id tempus. Nulla sed felis id quam hendrerit volutpat eget at velit. Praesent finibus, mauris ac molestie laoreet, erat est mattis velit, ac tincidunt nulla enim ac felis. In hac habitasse platea dictumst. Nam neque nibh, tempus a velit a, porttitor finibus quam. Nunc pharetra est eget urna mollis, sed facilisis eros pulvinar. Duis ac metus egestas, malesuada ligula eu, congue magna.' });

    console.log(this.scroll.nativeElement.scrollHeight);

  }

  ngAfterViewChecked() {
    this.scrollBottom()
  }

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

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

Обновление 1:

ngAfterViewChecked() {
    // this.scrollToTop()
  }

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

  }

закомментируйте ngAfterViewChecked (), который вы можете прокрутить вниз

По умолчанию я настроил его на прокрутку вверх после init

Попробуйтета же ссылка для просмотра источника обновлений