title: How to create a modal navigation menu on mobile and prevent body scrolling?
body: <p>I looked for and tested many solutions but I can't make it work yet. I want the subnavigation menu (modal) be able to scroll when showed, but not the body.</p>
  
  <p>I tried :</p>
  
  <p>1 : Javascript changing CSS property to "fixed" when modal open:</p>
  
  <pre><code>var main = document.getElementById('main');
  main.setAttribute("style", "position: fixed;");
  </code></pre>
  
  <p><strong>Problem :</strong> If you are scrolling the page when you open the modal, the page goes up (as "fixed" also means you can't have a scroll bar)</p>
  
  <p>2 : Javascript changing CSS property to "overflow hidden" when modal open :</p>
  
  <pre><code>document.body.setAttribute("style", "overflow: hidden;");
  </code></pre>
  
  <p><strong>Problem :</strong> Doesn't work on mobile, still scrolls (I use android).</p>
  
  <p>3 : Javascript disabling touch events :</p>
  
  <pre><code>var main = document.getElementById('main');
  main.addEventListener('touchstart', function(e){ e.preventDefault(); });
  main.addEventListener('scroll', function(e){ e.preventDefault();});
  main.addEventListener('touchmove', function(e){ e.preventDefault();});
  </code></pre>
  
  <p><strong>Problem :</strong> Works except if you start touching from within the subnavigation menu.</p>
  
  <p>See this to understand better what I mean : <a href="http://i45.tinypic.com/ajl3rt.png" rel="noreferrer">http://i45.tinypic.com/ajl3rt.png</a></p>
  
  <p>Then, how to prevent the body scrolling in a mobile device when an overlay menu is displayed?</p>