javascript - Prevent HTML Scrolling When scrolling inside element, without hiding scrollbar -

javascript - Prevent HTML Scrolling When scrolling inside element, without hiding scrollbar -

i want prevent scrolling of body or html when user scrolling within menu. however, don't want set $('html').css('overflow','hidden'); because makes entire document shift right. want disable html scroll when scrolling or swiping within menu. tried search topic lot, nil found worked me.

fiddle

set when menu 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 when closes:

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

you need add together class="noscroll" in text div it, check fiddle.

ios solution based on:

how enable default after event.preventdefault()?

jsfiddle: http://jsfiddle.net/m2ga2ygo/4/. uploaded test: https://liebdich.biz/develop/iosmobile.html.

javascript css scroll overflow