title: How to disable scroll / scrolling on iOS devices (iPad, iPhone, Mac) with user-controlled toggle (enable / disable)
body: <p>In reviewing the many questions and answers on this topic on StackOverflow, none of the solutions provided worked reliably. All CSS, JavaScript, jQuery and hybrid solutions had at least one deficiency that prevented the scroll from disabling and/or toggling effectively.</p>
  
  <p>I've also searched the web high and wide and have not found a good answer.</p>
  
  <p>So far I have this function:</p>
  
  <pre><code>function toggleScroll(btn, item) {
   $(btn).click(function() {
    $(item).toggleClass("noscroll");
   });
  }
  </code></pre>
  
  <p>...which will add a <code>overflow: hidden;</code> to any class I want <code>onclick</code>, and remove it on second click.</p>
  
  <p>The thing is, this code doesn't work with iOS devices.</p>
  
  <p>How could I make this work with iOS devices?</p>
  
  <p>Ideally, I would prefer a pure CSS solution. But I understand that this may not be possible, especially the toggle component.</p>
  
  <p>Any JavaScript or jQuery solution would be fine, as well.</p>
  
  <p>Thanks in advance!</p>