0

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?

glxtch
  • 1
  • Try using `stopPropagation()` in your swipe method. Since your menu will be a child element of your body, the swipe will bubble up and when it reaches the body, it will trigger the scroll. – Lapskaus May 27 '22 at 07:27

1 Answers1

0

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;
}
Anupam Mistry
  • 403
  • 6
  • 21