각도 2의 버튼 클릭을 기준으로 div 스크롤 위치를 이동하는 방법 app.component.html 파일에서

Question

의 div 스크롤 요소를 사용하려면 가로 스크롤과 두 버튼이 다음과 이전 인 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' }); 
     }); 
    } 

    }