javascript - 在 offcanvas 中禁用主体滚动( Bootstrap )

Question

使用固定的 Canvas 菜单。当它在 ios 中处于事件状态时，似乎无法禁用 body 滚动。概念很简单，overflow-y:auto; 在 offcanvas 固定菜单中，overflow:hidden; 在 body 中。这可以用 jquery 而不是依赖 CSS 吗？在 jquery 中执行此操作有什么更好的方法，例如:防止默认或其他什么？

Jquery(offcanvas):

$('[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" );
  });

这是 CSS 类:

.offcanvas-body {
overflow: hidden!important;
}

使用 $( "html").addClass( ".offcanvas-body"); 在桌面浏览器中有效，但在 ios 和平板电脑中失败。对此的任何指示将不胜感激。

Answer 1

我最终绑定(bind)了 touchmove 事件，然后在 setInterval 中取消绑定(bind)，但可能有更好的方法。

function removeMobileScroll (e) {
    e.preventDefault();
}
setInterval(function() {
    if ($('.navmenu').hasClass('in')) {
        $('body').bind('touchmove', removeMobileScroll);
    }
        else {
    $('body').unbind('touchmove', removeMobileScroll);
    }
}, 100);