当在特定 Div 上启动滑动时，如何在移动设备上禁用页面滚动？

Question

I have a fixed menu at the bottom of the screen on mobile devices. When you swipe up in the trigger area, it opens the menu and vice versa (closes it when you swipe down on the menu)

My issue is that when I swipe up, it scrolls the page down and when I swipe down it scrolls the entire page up.

How can I disable page scrolling when the swipe is initiated in a certain area?

Answer 1

Add class in body tag when you swipe up from your bottom menu. In that new class put overflow hidden CSS. I suggest it looks good if you add click effect instead of swipe up. Or here this is one similar question.

 $('#menu li a').on('click', function(){ $('body').removeClass('overflow-hidden'); $(this).parents('body').addClass('overflow-hidden'); });

 .overflow-hidden{ overflow: hidden; }