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>

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

Answer 2

尝试添加

public onPreviousSearchPosition(): void {
    console.log(this.scroll.nativeElement.scrollTop -= 20);
}

，请注意，如果将其滚动到顶部，它将记录0或负数，因此，请每次检查该值，如果<<

则将其禁用

Answer 3

基于元素的高度和当前位置，禁用和启用按钮

TS

  public onPreviousSearchPosition(): void {
    this.scrollUp = true;
    this.scrollDown = true;

    if (this.scroll.nativeElement.scrollTop <= 20) {
      this.scrollUp = false;
    }


    this.scroll.nativeElement.scrollTop -= 20;
  }

  public onNextSearchPosition(): void {
    this.scrollDown = true;
    this.scrollUp = true;

    if (this.scroll.nativeElement.scrollTop >=
      this.scroll.nativeElement.offsetHeight - 20) {
      this.scrollDown = false;
    }


    this.scroll.nativeElement.scrollTop += 20;
  }

HTML

<button (click)="onPreviousSearchPosition()" [disabled]="!scrollUp">Up</button>
<button (click)="onNextSearchPosition()" [disabled]="!scrollDown">Down</button>

Slack Blitz

Answer 4

您需要了解两件事：

元素<p> 的高度，const pHeight = document.querySelector("p").clientHeight;
滚动高度，document.querySelector("p").scrollHeight

因此要找到最大滚动高度，只需执行以下操作：

ngOnInit() {
   const pHeight = document.querySelector("p").clientHeight;
   this.maxScroll = document.querySelector("p").scrollHeight - pHeight;
}

并禁用以下按钮：

<button [disabled]="(scroll.scrollTop === 0)" (click)="onPreviousSearchPosition()">Up</button>
<button [disabled]="scroll.scrollTop === maxScroll"  (click)="onNextSearchPosition()">Down</button>

并添加一些样式来禁用按钮的状态，这些样式在DEMO

中提供

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

4 个答案: