title: Prevent body from scrolling but not any parent div on touch devices
body: <p>I want my <code>body</code> not to scroll if <code>'not-scroll'</code> class is appended on it, otherwise it should work normally.</p>
  
  <p>I have been searching for this problem for 2 days, but can't find any solution working for me. </p>
  
  <p>What I want is to add a <code>class</code> to <code>body</code>, and it should not scroll if any one try to scroll on it. But every other <code>element</code> should scroll, if scrolling is possible in them. 
  I have already read so many stackoverflow answers, but nothing is workable for me. I have checked out, <a href="https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened">solution 1</a>,<a href="https://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling">solution 2</a>,<a href="https://stackoverflow.com/questions/13868996/prevent-body-element-from-scrolling-on-touch-devices">solution 3</a>,<a href="https://stackoverflow.com/questions/9486195/prevent-touchmove-default-on-parent-but-not-child">solution 4</a> and many others..</p>
  
  <p>PS: Actually, I am implementing <a href="http://fancyapps.com/fancybox/" rel="nofollow noreferrer">fancybox</a> in my application, which opens a model screen on the <code>body</code>, now if user tries to scroll on the model, <code>body</code> behind the model view scrolls. I want to prevent this.</p>
  
  <p>I have tried this.</p>
  
  <pre><code>$(document).on('touchmove',function(event) {
       if($('body').hasClass('no-scroll')) {
           event.preventDefault();
       }
  });
  </code></pre>
  
  <p>but it also prevents scrolling inside model view. Any help would be appreciated!!</p>
  
  <p>Thanks in advance. </p>
  
  <p>Scenario is like shown in picture, captured form iPad mini<img src="https://i.stack.imgur.com/HosZl.jpg" alt="Image:"></p>