Отключить кнопку в конце прокрутки в Angular 6

В моем коде я прокручиваю div при нажатии кнопки. Вот мой код.

Мой код

Я хочу отключить кнопку вниз, если пользователь прокручивает до конца div и наоборот. Пожалуйста помоги.

🤔 А знаете ли вы, что...
Angular поддерживает разработку мобильных приложений с использованием фреймворка NativeScript.


3
4 067
4

Ответы:

попробуйте добавить это

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

и обратите внимание, что если прокрутить вверх, то будет записано 0 или отрицательное число, поэтому проверяйте значение каждый раз и отключите его, если его <= 0


Решено

Для этого вы можете создать директиву 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;
        }
    }
}

На основе высоты элемента и текущего положения, Отключить и включить кнопку

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


вам нужно выяснить 2 вещи:

  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>

и добавить несколько стилей для отключения состояния кнопок, которые предусмотрены в ДЕМО