title: Disable outer content's scrolling on touch based devices (Twitter bootstrap navbar)
body: <p>I use twitter bootstrap 3. I added fixed top navbar. I have dropdown buttons on navbar. When user clicks on button, a dropdown menu opens. For desktop users it is ok. But for mobile users, when user scrolls down dropdown links, the page in the back also scrolls.</p>
  
  <p>Is it possible to disable background page scroll when user scrolls dropdown links ?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/mavent/2g5Uc/1/" rel="nofollow noreferrer">http://jsfiddle.net/mavent/2g5Uc/1/</a></p>
  
  <p>When user touches dropdown part and touches like the green arrow, background page scrolls like red arrow in this screenshot: 
  <img src="https://i.stack.imgur.com/3M9g2.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation"&gt;
      &lt;div class="navbar-header" style="text-align:center;"&gt;
       .......
      &lt;/div&gt;
  </code></pre>
  
  <p>Edit: I checked <a href="https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily">that</a>, <a href="https://stackoverflow.com/questions/7571370/jquery-disable-scroll-when-mouse-over-an-absolute-div">that</a> and <a href="https://stackoverflow.com/questions/9256213/how-to-disable-scrolling-in-outer-elements">that</a>.</p>
  
  <p>Edit:
  This doesn't work. This stops all page scrolling.</p>
  
  <pre><code>$('#my_navbar_div').bind('touchmove', function(event)
  {
      event.preventDefault();
  });
  </code></pre>
  
  <p>This doesn't work. Doesn't changed anything in behaviour:</p>
  
  <pre><code>$('#my_navbar_div').hover(function() {
      $(document).bind('touchstart touchmove',function(){
          $("body").css("overflow","hidden");
      });
  }, function() {
      $(document).unbind('touchstart touchmove');
  });
  </code></pre>