overflow-x
和 overflow-y
被设置为 auto
。此外,我已经设置了动量滚动,使得触摸滚动在移动设备上运行良好,使用 webkit-overflow-scrolling: true
。然而问题在于,我无法弄清楚如何在垂直滚动时禁用水平滚动。这会导致非常糟糕的用户体验,因为向左上或右上滑动会导致表格对角线滚动。当用户在垂直滚动时,我绝对不希望出现任何水平滚动,直到用户停止垂直滚动。
我尝试了以下内容:
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;
}
}
但是每次当我设置overflow-x
或者overflow-y
为hidden
时,页面已经滚动的部分会出现跳动的情况并回到页面顶部。我也注意到这是由于webkit-overflow-scrolling: true
造成的,如果我去掉它,这种行为似乎就不再发生了,但是在移动设备上,我绝对需要它来进行动量滚动。
如何在垂直滚动时禁用水平滚动?