div2のスクロール位置の移動方法angle2のボタンクリック

Question

app.component.htmlファイル内には、水平スクロールと2つのボタンがあり、次と前の2つのdiv要素があります。これらのボタンのクリックに基づいて私はスクロールを移動したい。私たちは、スクロールを移動することができますが、我々は後に取得するイベントオブジェクトをスクロールする必要があるコードの上に使用して

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

手動でスクロールします。 は私を提案してください、コンポーネントクラスでは、scrollイベントオブジェクトを作成する方法を

Answer 1

これはdiv要素をスクロールする方法である - https://plnkr.co/edit/2v0iVgkOZfISqlFAkrNX?p=preview

インポートから{コンポーネント、ViewChild、ElementRef} '@角度/コア';

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

Answer 2

私はscrollIntoView()メソッドを使用することをお勧めします。それは、ブラウザ内で滑らかなスクロール遷移効果を提供する。

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

    }