मेरे पास overflow-xऔर overflow-yसेट के साथ एक सूची है auto। इसके अलावा, मैंने गति स्क्रॉल सेट किया है, इसलिए मोबाइल में टच स्क्रॉलिंग अच्छा काम करती है webkit-overflow-scrolling: true।
हालाँकि, समस्या यह है कि मैं लंबवत स्क्रॉल करते समय क्षैतिज स्क्रॉल को अक्षम करने का तरीका नहीं जान सकता। यह वास्तव में खराब उपयोगकर्ता अनुभव की ओर जाता है, क्योंकि ऊपर बाईं ओर या ऊपर दाईं ओर स्वाइप करने से तालिका तिरछे स्क्रॉल होगी। जब उपयोगकर्ता लंबवत स्क्रॉल कर रहा होता है, तो मैं बिल्कुल भी क्षैतिज रूप से स्क्रॉल नहीं करना चाहता जब तक कि उपयोगकर्ता ने लंबवत स्क्रॉल करना बंद न कर दिया हो।
मैंने निम्नलिखित कोशिश की है:
जे एस:
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"
>सीएसएस:
&__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यही कारण है कि ऐसा होता है, जब मैं इसे हटाता हूं, तो व्यवहार बंद हो जाता है, लेकिन मुझे मोबाइल उपकरणों में गति के लिए इसकी आवश्यकता है।
लंबवत स्क्रॉल करते समय मैं क्षैतिज स्क्रॉल को कैसे अक्षम करूं?