Disable scrolling of external content on touch devices (Twitter boot navigator)

Question

I use twitter bootstrap 3. I added a fixed top navigator. I have buttons on the navigation bar. When the user clicks a button, a drop-down menu opens. For desktop users, this is normal. But for mobile users, when the user scrolls the drop-down links, the page in the back also scrolls.

Is it possible to disable the scrolling of the background page when the user scrolls the dropdown links?

Fiddle: http://jsfiddle.net/mavent/2g5Uc/1/

When the user touches the drop-down part and touches like a green arrow, scrolling appears on this page as a red arrow:

<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation"> <div class="navbar-header" style="text-align:center;"> ....... </div> 

Edit: I checked which , which, and what .

Edit: This does not work. This stops the page scrolling.

 $('#my_navbar_div').bind('touchmove', function(event) { event.preventDefault(); }); 

This does not work. Nothing has changed in behavior:

 $('#my_navbar_div').hover(function() { $(document).bind('touchstart touchmove',function(){ $("body").css("overflow","hidden"); }); }, function() { $(document).unbind('touchstart touchmove'); }); 

Answer 1

To have more options for scrolling, you can try the following.

Disable all scrolling:

 //create the exception variable. var Scrollable = '.scrollable'; //prevent all scrolling. $(document).on('touchmove', function(e) { e.preventDefault(); }); $('body').on('touchstart', Scrollable, function(e) { if (e.currentTarget.scrollTop === 0) { e.currentTarget.scrollTop = 1; } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) { e.currentTarget.scrollTop -= 1; } }); 

Below is the ability to scroll through exceptions:

  // Stops preventDefault from being called on document if it sees a scrollable div $('body').on('touchmove', Scrollable, function(e) { e.stopPropagation(); }); 

What you want to do is set the scrollable class for each element that you want to scroll. Of course, you can always call stopPropagation() if you want.

That way, you can easily decide whether you want something scrollable or not, overflow does not always work the way you think.

Hope this helps.

Edit: You should also try setting the z-index your #nav higher than the z-index your body / content container.

Answer 2

I had the same problem, and I decided to use Billy's answer, and also add a class to the body when I click on the menu.

In your CSS:

  .no-scroll{ overflow: hidden; position: fixed; width: 100%; } 

In your JavaScript, do something like:

  $(".navbar-toggle").click(function() { if ($("#mobile-toggle-menu").hasClass("in")) { return $("body").removeClass("no-scroll"); } else { return $("body").addClass("no-scroll"); } }); 

I use CoffeeScript, so I'm not 100% sure that the JavaScript syntax is correct, but it worked for me and it works on both Android and iPhone.