在 app.component.html 文件中,我有一个带有水平滚动的 div 元素和两个按钮,即“下一个”和“上一个”。根据这些按钮单击我想移动滚动。
应用程序组件.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>
应用程序组件.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;
}
使用上面的代码我们可以移动滚动,但我们需要手动滚动后将获得的滚动事件对象。
请建议我如何在组件类中创建滚动事件对象
这是滚动 div 元素的方式 -https://plnkr.co/edit/2v0iVgkOZfISqlFAkrNX?p=preview
example:
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;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)