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;
}
}
그러나 매번 I 세트 overflow-x
나 overflow-y
에 hidden
의 스크롤 된 경우 글리치 상단으로 다시 이동합니다 스크롤. 또한 webkit-overflow-scrolling: true
이것이 발생하는 이유입니다.이를 제거하면 동작이 중지되는 것처럼 보이지만 모바일 장치에서 운동량 스크롤을 위해서는 이것이 필요합니다.
세로로 스크롤 할 때 가로 스크롤을 비활성화하려면 어떻게합니까?