В моем коде я прокручиваю div при нажатии кнопки. Вот мой код.
Я хочу отключить кнопку вниз, если пользователь прокручивает до конца div и наоборот. Пожалуйста помоги.
🤔 А знаете ли вы, что...
Angular поддерживает разработку мобильных приложений с использованием фреймворка NativeScript.
попробуйте добавить это
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>
вам нужно выяснить 2 вещи:
<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>
и добавить несколько стилей для отключения состояния кнопок, которые предусмотрены в ДЕМО