Tôi có một danh sách, với overflow-xvà overflow-yđược đặt thành auto. Ngoài ra, tôi đã thiết lập cuộn đà, do đó, cuộn cảm ứng hoạt động tốt trên thiết bị di động, sử dụng webkit-overflow-scrolling: true.
Tuy nhiên, vấn đề là tôi không thể tìm ra cách vô hiệu hóa cuộn ngang khi cuộn theo chiều dọc. Nó dẫn đến trải nghiệm người dùng thực sự tồi tệ, vì việc vuốt về phía trên bên trái hoặc trên cùng bên phải sẽ khiến bảng cuộn theo đường chéo. Khi người dùng cuộn theo chiều dọc, tôi hoàn toàn KHÔNG muốn cuộn theo chiều ngang cho đến khi người dùng ngừng cuộn theo chiều dọc.
Tôi đã thử như sau:
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;
}
}Nhưng mỗi khi tôi đặt overflow-xhoặc overflow-yđến hiddenkhi nó được cuộn, cuộn sẽ bị trục trặc và nhảy trở lại đầu trang. Tôi cũng nhận thấy đó webkit-overflow-scrolling: truelà lý do tại sao điều này xảy ra, khi tôi gỡ bỏ nó, hành vi dường như dừng lại, nhưng tôi hoàn toàn cần điều này để cuộn đà trong thiết bị di động.
Làm cách nào để tắt cuộn ngang khi cuộn theo chiều dọc?