Question

使用固定的offcanvas菜单。在ios中处于活动状态时似乎无法禁用正文滚动。概念很简单，在offcanvas固定菜单中overflow-y:auto;，在身体中overflow:hidden;。这可能与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

我最终绑定了touchmove事件，然后在setInterval中解除绑定，但可能有更好的方法。

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

在offcanvas中禁用正文滚动（bootstrap）

1 个答案: