在Angular 6中滚动结束时禁用按钮

Question

在我的代码中,我按下按钮点击div.这是我的代码.

我的守则

如果用户滚动到div的末尾,我想禁用向下按钮,反之亦然.请帮忙.

Answer 1

您可以为此创建customScroll指令..

我在Stackblitz上创建了一个演示 .我希望这将有助于/指导您/其他人.

app.component.html

<button [disabled]="appScrollElement.disableBtn" (click)="onPreviousSearchPosition()">Up</button>
<button [disabled]="!appScrollElement.disableBtn" (click)="onNextSearchPosition()">Down</button>

定制scroll.directive.ts

import { Directive,HostListener,ElementRef} from '@angular/core';

@Directive({
  selector: '[appCustomScroll]',
  exportAs:'appCustomScroll'
})
export class CustomScrollDirective {

    disableBtn:boolean=true;
    top:number;
    offSetHeight:number;
    scrollHeight:number;
    constructor(private eleRef:ElementRef){}

    @HostListener('scroll') onScrollEvent(event:Event){
        this.top=this.eleRef.nativeElement.scrollTop;
        this.offSetHeight=this.eleRef.nativeElement.offsetHeight;
        this.scrollHeight=this.eleRef.nativeElement.scrollHeight;
        if(this.top === 0){
          this.disableBtn=true;
        }
        if(this.top>this.scrollHeight-this.offSetHeight-1){
          this.disableBtn=false;
        }
    }
}