Ich habe eine Liste mit der overflow-x
und overflow-y
gesetzt auf auto
. Außerdem habe ich Momentum Scroll eingerichtet, damit das Touch-Scrollen in Mobilgeräten mit funktioniert webkit-overflow-scrolling: true
.
Das Problem ist jedoch, dass ich nicht herausfinden kann, wie der horizontale Bildlauf beim vertikalen Bildlauf deaktiviert werden kann. Dies führt zu einer sehr schlechten Benutzererfahrung, da durch Wischen nach oben links oder oben rechts die Tabelle diagonal gescrollt wird. Wenn der Benutzer vertikal scrollt, möchte ich auf keinen Fall horizontal scrollen, bis der Benutzer aufgehört hat, vertikal zu scrollen.
Ich habe folgendes versucht:
JS:
offsetX: number;
offsetY: number;
isScrollingHorizontally = false;
isScrollingVertically = false;
//Detect the scrolling events
ngOnInit() {
this.scrollListener = this.renderer.listen(
this.taskRows.nativeElement,
'scroll',
evt => {
this.didScroll();
}
);
fromEvent(this.taskRows.nativeElement, 'scroll')
.pipe(
debounceTime(100),
takeUntil(this.destroy$)
)
.subscribe(() => {
this.endScroll();
});
}
didScroll() {
if ((this.taskRows.nativeElement.scrollLeft != this.offsetX) && (!this.isScrollingHorizontally)){
console.log("Scrolling horizontally")
this.isScrollingHorizontally = true;
this.isScrollingVertically = false;
this.changeDetectorRef.markForCheck();
}else if ((this.taskRows.nativeElement.scrollTop != this.offsetY) && (!this.isScrollingVertically)) {
console.log("Scrolling Vertically")
this.isScrollingHorizontally = false;
this.isScrollingVertically = true;
this.changeDetectorRef.markForCheck();
}
}
endScroll() {
console.log("Ended scroll")
this.isScrollingVertically = false;
this.isScrollingHorizontally = false;
this.changeDetectorRef.markForCheck();
}
HTML:
<div
class="cu-dashboard-table__scroll"
[class.cu-dashboard-table__scroll_disable-x]="isScrollingVertically"
[class.cu-dashboard-table__scroll_disable-y]="isScrollingHorizontally"
>
CSS:
&__scroll {
display: flex;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: auto;
will-change: transform;
-webkit-overflow-scrolling: touch;
&_disable-x {
overflow-x: hidden;
}
&_disable-y {
overflow-y: hidden;
}
}
Aber jedes Mal , wenn ich einstelle overflow-x
oder wenn es gescrollt wird, wird das Scrollen fehlerhaft und springt zurück nach oben. Ich habe auch bemerkt, dass dies der Grund ist, warum dies auftritt, wenn ich es entferne, scheint das Verhalten zu stoppen, aber ich brauche dies unbedingt für das Momentum-Scrollen in mobilen Geräten.overflow-y
hidden
webkit-overflow-scrolling: true
Wie deaktiviere ich den horizontalen Bildlauf beim vertikalen Bildlauf?