0

I want to prevent scrolling of the body or html when user is scrolling inside the menu. However, I DON'T WANT to set $('html').css('overflow','hidden'); because this makes the entire document shift right. I just want to disable the HTML scroll when scrolling or swiping inside the menu. I tried to search this topic a lot, but nothing I found really worked for me.

FIDDLE

Florin Pop
  • 5,105
  • 3
  • 25
  • 58
geochanto
  • 972
  • 2
  • 13
  • 45

1 Answers1

1

Set this when the menu is open:

var thisHeight = $(window).scrollTop();
$(window).on('scroll', function() {
    $('html,body').scrollTop(thisHeight);
});

$('.noScroll').on('touchstart' , function(e) { e.preventDefault(); })
$('.noScroll').on('touchmove' , function(e) { e.preventDefault(); })

And this when it closes:

$(window).off('scroll');
$('.noScroll').off('touchstart');
$('.noScroll').off('touchmove');
$('.noScroll').on('touchstart' , function(){ return true; });        
$('.noScroll').on('touchmove' , function(){ return true; });

You need to add a class="noScroll" in the text div for it, check FIDDLE.

iOS solution based on:

How to unbind a listener that is calling event.preventDefault() (using jQuery)?

JSFIDDLE: http://jsfiddle.net/m2ga2ygo/4/.

Uploaded test: https://liebdich.biz/develop/iosMobile.html.

Community
  • 1
  • 1
loveNoHate
  • 1,549
  • 13
  • 21
  • This mostly works but the problem is that on touch-screen devices it causes the background to flicker up and down instead of staying put in one place during the swipe. Is there a way around that? I have a starter demo here, you can check on your phone if you want: http://76.163.3.49/ – geochanto Oct 06 '14 at 20:25
  • Hmm, the problem on iOS is, that the scroll event is only triggered on touchend. Let me see what I can do – loveNoHate Oct 07 '14 at 03:01
  • This update makes no difference - the effect is the same. It's not just iOS, but android too. – geochanto Oct 07 '14 at 20:11
  • I had posted the wrong JSFIDDLE. Now updated and uploaded. "Works" on iOS but has an evil skipping if you are at the bottom and still scrolling. Have no android, please feed back. – loveNoHate Oct 08 '14 at 11:10