web-dev-qa-db-fra.com

comment déplacer la position de défilement div en fonction du clic du bouton dans angular 2

dans le fichier app.component.html, j'ai un élément div avec défilement horizontal et deux boutons suivant et précédent. sur la base de ces boutons, cliquez sur je veux déplacer le défilement.

app.component.html

<div id="th-infinite-scroll-tracker" style="overflow-y:scroll; height: 200px;" scrollTracker (scroll)="onScroll($event)" (mouseup)="searchLog($event)">
        <div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>
</div>
<button (click)="onPreviousSearchPosition()" [disabled]="disablePreviousBtn">Previous</button>
<button (click)="onNextSearchPosition()" [disabled]="disableNextBtn">Next</button>

app.component.ts

@HostListener('scroll', ['$event'])
onScroll(event){
    this.scrollObject = event;
}
onPreviousSearchPosition(){
    this.disableNextBtn = false;

    this.scrollObject.target.scrollTop = 20 * --this.idCount;
  }
onPreviousNextPosition(){
    this.disableNextBtn = false;

    this.scrollObject.target.scrollTop = 20 * ++this.idCount;
  }

en utilisant le code ci-dessus, nous pouvons déplacer le défilement, mais nous avons besoin d'un objet d'événement de défilement qui sera obtenu après le défilement manuel. Veuillez me suggérer, comment créer un objet d'événement de défilement dans la classe de composants

angulartypescriptscrollscrollbarangular2-template
6
Yogesh Ukale

Voici comment faire défiler l'élément div - https://plnkr.co/edit/2v0iVgkOZfISqlFAkrNX?p=preview

exemple:

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <div #panel style="overflow-y:scroll; height: 20px;" >
      <div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>
    </div>
    <button (click)="onPreviousSearchPosition()">Previous</button>
    <button (click)="onNextSearchPosition()">Next</button>
  `
})
export class AppComponent { 
  public arr = ['foo', 'bar', 'baz'];
  @ViewChild('panel', { read: ElementRef }) public panel: ElementRef<any>;

  public onPreviousSearchPosition(): void {
    this.panel.nativeElement.scrollTop -= 20;
  }

  public onNextSearchPosition(): void {
    this.panel.nativeElement.scrollTop += 20;
  }
}
17
rusev

Je préférerais utiliser la méthode scrollIntoView() . Cette méthode fournit un effet de transition de défilement fluide dans le navigateur lorsque nous cliquons sur l'élément correspondant.

    @Component({
    selector: 'my-app',
    template: `
      <div #panel class="some-class">
        <div *ngFor="let log of arr; let i = index" innerHTML="{{log}}" [id]="i"></div>
      </div>
      <button (click)="moveToSpecificView()">Move</button>
    `
})
export class AppComponent {
    public arr = ['foo', 'bar', 'baz'];
    @ViewChild('panel') public panel:ElementRef;

    public moveToSpecificView()(): void {
        setTimeout(() => {
            this.panel.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'start' });
        });
    }

  }
7
Praveen M P