代码之家  ›  专栏  ›  技术社区  ›  vedankita kumbhar

角度6滚动结束时的禁用按钮

  •  2
  • vedankita kumbhar  · 技术社区  · 6 年前

    在我的代码中,我在按钮点击时滚动div。这是我的密码。

    My Code

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

    4 回复  |  直到 6 年前
        1
  •  10
  •   Krishna Rathore    6 年前

    您可以为此创建一个customScroll指令。。

    Stackblitz . 我希望这对你/其他人有帮助/指导。

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

    自定义滚动指令.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;
            }
        }
    }
    
        2
  •  0
  •   Pandiyan Cool    6 年前

    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

        3
  •  0
  •   mohammad sharifi    6 年前

    你需要找出两件事:

    1. <p> const pHeight = document.querySelector("p").clientHeight;
    2. 卷轴高度 通过 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

        4
  •  0
  •   Nicholas K    6 年前

    尝试添加此

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

    所以每次都要检查这个值,如果它的<=0,就禁用它

    推荐文章