title: Disable body scroll in offcanvas (bootstrap)
body: <p>Working with a fixed offcanvas menu. Cannot seem to disable body scroll when it is active in ios. The concept is simple, <code>overflow-y:auto;</code> in the offcanvas fixed menu and <code>overflow:hidden;</code> in the body. Is this possible to do with jquery instead of relying on the CSS? and what is be better to do this in jquery, eg: prevent default or something?</p>
  
  <p>Jquery (offcanvas):</p>
  
  <pre><code>$('[data-toggle="offcanvas"]').click(function () {
    $('.offcanvas').toggleClass('active');
    $( "body" ).addClass( ".offcanvas-body" ); //Here not working! 
    $(".nav.nav-pills").toggleClass('nav nav-pills').addClass( "nav navbar-nav" );
    $(".subnavbar.headroom.navbar-default.subnavbar-fixed-top.hidden-xs.hidden-sm").removeClass("subnavbar headroom navbar-default subnavbar-fixed-top hidden-xs hidden-sm").addClass("navmenu navmenu-default hidden-md hidden-lg" );
    });
  </code></pre>
  
  <p>Here is CSS class:</p>
  
  <pre><code>.offcanvas-body {
  overflow: hidden!important;
  }
  </code></pre>
  
  <p>Using <code>$( "html" ).addClass( ".offcanvas-body" );</code> works in a desktop browsers but fails in ios and tablets. Any direction on this one would be appreciated. </p>