web-dev-qa-db-ja.com

angular 2のボタンクリックに基づいてdivスクロール位置を移動する方法

app.component.htmlファイルには、水平スクロールを備えた1つのdiv要素と、次と前の2つのボタンがあります。これらのボタンのクリックに基づいて、スクロールを移動します。

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

上記のコードを使用してスクロールを移動できますが、手動でスクロールした後に取得するスクロールイベントオブジェクトが必要です。コンポーネントクラスでスクロールイベントオブジェクトを作成する方法を教えてください

angulartypescriptscrollscrollbarangular2-template
6
Yogesh Ukale

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

例：

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

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

  }
7
Praveen M P