Stop iOS scroll on DIV overlay appear

139
November 22, 2016, at 2:06 PM

I'm using Media Queries to make a Nav overlay appear on screen widths less than 40em. I have my .mobile-nav appearing (and disappearing) when .mobilemenu is clicked using a small bit of JQuery

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
    jQuery('body').addClass('noscroll');
    e.preventDefault();
});

The problem I'm having is that when this is activated the page behind is still scrolling, but ideally I want it to be fixed in position. I've tried using .addClass as you can see above, which appends a .noscroll class with overflow: hidden; but this seems to work perfectly when simulated on a browser (except the class is not removed so then the page is stuck!) but on iOS it does not work at all.

I'm sure there must be a more simple elegant solution that actually works! If anyone has any idea that would be great.

Answer 1

Answered and expanded upon here

But for reference, code is below:

jQuery('.mobilemenu').click(function(e) {
    jQuery(this).toggleClass('is-active');
    jQuery('.mobile-nav').toggleClass('active');
        if(jQuery('.mobile-nav').hasClass('active')) {
            $('body').on('touchmove', false);
        } else  {
            $('body').off('touchmove', false);
        }
});
READ ALSO
jQuery nextAll() traversing method equivalent in Nokogiri?

jQuery nextAll() traversing method equivalent in Nokogiri?

I wrote the following code with jQuery:.

135
jsTree load children of child elements in ajax call

jsTree load children of child elements in ajax call

I am trying to load child nodes with ajax on jsTree. I can load child nodes of a clicked nodes using the callback method.

170
Jquery Message Popup Trigger and Ignoring the message

Jquery Message Popup Trigger and Ignoring the message

If I want to ignore one of the notification below both of the notifications are being removed. .

86
Make Div fit full window [duplicate]

Make Div fit full window [duplicate]

This question already has an answer here:.

102