আমার সাথে একটি তালিকা আছে 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();
}
এইচটিএমএল:
<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এটি কারণ হ'ল, যখন আমি এটি সরিয়ে ফেলি, আচরণটি বন্ধ হয়ে যায় বলে মনে হয় তবে মোবাইল ডিভাইসগুলিতে গতিবেগ স্ক্রোলিংয়ের জন্য আমার একেবারে এটি প্রয়োজন need
উল্লম্বভাবে স্ক্রোল করার সময় আমি কীভাবে অনুভূমিক স্ক্রোলটি অক্ষম করব?