Prevent HTML Scrolling When scrolling inside element, without hiding scrollbar

Question

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 6, 2014 at 20:01

loveNoHate

1,5451 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

geochanto Over a year ago

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: 76.163.3.49

loveNoHate Over a year ago

Hmm, the problem on iOS is, that the scroll event is only triggered on touchend. Let me see what I can do

geochanto Over a year ago

This update makes no difference - the effect is the same. It's not just iOS, but android too.

loveNoHate Over a year ago

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.

Collectives™ on Stack Overflow

Prevent HTML Scrolling When scrolling inside element, without hiding scrollbar

1 Answer 1

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

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

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

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

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related