0

I'm currently encountering issues with a mobile navigation I have created. It's a simple hamburger icon and when you click it, it opens a fullscreen menu. The problem is I'm trying to disable scrolling when the overlay is visible. Now I figured I could achieve this by adding;

$('body').bind('touchmove', function(e){e.preventDefault()});

This works once, but when you close the menu again preventDefault remains active and I have no clue how to unbind this because the hamburger icon is used for both opening and closing the menu.

I have added the full js script I use below;

$(document).ready(function () {
  $(".icon").click(function () {
    $('body').bind('touchmove', function(e){e.preventDefault()}); 
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  }); 
});

Thanks for the help!

Quincy Norbert
  • 431
  • 1
  • 6
  • 18

2 Answers2

1

It's easy to achieve, using .on() and .off() jQuery methods!

$(document).on('touchmove', 'body', function(e){e.preventDefault()});
$(document).off('touchmove', 'body', function(e){e.preventDefault()});

But there is also an unbind() function!

$('body').unbind('touchmove', function(e){e.preventDefault()});

Code example:

$(document).ready(function () {

  var cancelScroll = function(e) { e.preventDefault(); }

  $(".icon").click(function () {
    if ($(".mobilenav").is(":visible")) {
      $('body').unbind('touchmove', cancelScroll); 
    } else {
      $('body').bind('touchmove', cancelScroll); 
    }
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  }); 
});

Note: Returning false from a handler is equivalent to calling both .preventDefault() and .stopPropagation() on the event object.

so it could be just:

var cancelScroll = function() { return false; }
Sergej
  • 2,030
  • 1
  • 18
  • 28
  • I'm aware of those functions, but I have to idea where to add them within my script. So I'm unsure where to unbind the prevent default. – Quincy Norbert Aug 03 '17 at 12:02
  • Thanks for the quick response, but I'm having the same issue as the other answer. The unbind part just isn't working. – Quincy Norbert Aug 03 '17 at 12:15
  • Try to use .on() and .off() functions instead! – Sergej Aug 03 '17 at 12:16
  • Instead of bind and unbind? – Quincy Norbert Aug 03 '17 at 12:26
  • Ah. I remembered the issue why. You need to bind and unbind exactly the same function. But not the same-defined function. I mean - you need to put your function into a variable. I will update the answer in 1 min – Sergej Aug 03 '17 at 12:30
  • Aha thanks for the fix, can you explain what the issue was with unbinding if I may ask? – Quincy Norbert Aug 03 '17 at 12:48
  • When you pass a function() {...} as a parameter - new function in memory is created. Even if the second function has the same parameters and the same body - in javascript - it is a new function, as it is created in a new memory location. So you binded one function and tried to unbind another function - thats why this did not work as expected. – Sergej Aug 03 '17 at 12:56
0

Add a flag to differentiate and unbind on close,

 $(document).ready(function () {
  var isClose = false;
  $(".icon").click(function () {

    if(isClose){
      $('body').unbind('touchmove', function(e){e.preventDefault()}); 
      isClose = false;
    }else{
      $('body').bind('touchmove', function(e){ e.preventDefault();});
      isClose = true; 
    }
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  }); 
});
Saravanan I
  • 1,229
  • 6
  • 9