移动菜单打开时body的滚动锁定不起作用

Question

我找到了其他几种解决方案，这些解决方案演示了如何使用CSS溢出属性锁定网站的滚动行为。因此，我实现了此解决方案，并在菜单打开时将overflow: hidden;添加到 body 标签中。但是，当使用iOS Safari或Chrome时，身体仍然可以滚动。

.CSS：

    body.opened-drawer {
      overflow: hidden !important;
      height: 100% !important;
      width: 100% !important;
      position: fixed !important;
      z-index: 0 !important;
    }

.JS：

timber.openDrawerMenu = function () {
  var $mobileMenu = $('.nav-bar'),
      $mobileMenuButton = $('#menu-opener'),
      $body = $('body');
      $mobileMenuButton.addClass('opened');
      $mobileMenu.addClass('opened');
      $body.addClass('opened-drawer');
  // Make drawer a11y accessible
  timber.cache.$navBar.attr('aria-hidden', 'false');
  // Set focus on drawer
  timber.trapFocus({
     $container: timber.cache.$navBar,
     namespace: 'drawer_focus'
  });
  // Escape key closes menu
  timber.cache.$html.on('keyup.drawerMenu', function(evt) {
    if (evt.keyCode == 27) {
      timber.closeDrawerMenu();
    }
  });
}
timber.closeDrawerMenu = function () {
  var $mobileMenu = $('.nav-bar'),
      $mobileMenuButton = $('#menu-opener'),
      $body = $('body');
  $mobileMenuButton.removeClass('opened');
  $mobileMenu.removeClass('opened');
  $body.removeClass('opened-drawer');
  // Make drawer a11y unaccessible
  timber.cache.$navBar.attr('aria-hidden', 'true');
  // Remove focus on drawer
  timber.removeTrapFocus({
    $container: timber.cache.$navBar,
    namespace: 'drawer_focus'
  });
  timber.cache.$html.off('keyup.drawerMenu');
}

Answer 1

在这里你可以快速修复

body.opened-drawer {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 0;
}

请在此处找到修改后的脚本

function menuDrawerButtons (){
    cache.$mobileMenuButton.on('click', function(e) {
         e.preventDefault();
        if ($(this).hasClass('opened')) {
            timber.closeDrawerMenu()
        } else {
            timber.openDrawerMenu();
        }           
    });
    setTimeout(function() {
        cache.$mobileMenu.addClass('animate');
    }, 500);
}

Answer 2

我得出的解决方案更像是一个黑客，而不是一个解决方案，但无论哪种方式都可以完成工作。我所做的是在打开菜单时固定身体上的位置，并在菜单打开或关闭时计算和设置 scrollTop 位置。

j查询：

    var tempScrollTop = null;
    tempScrollTop = $(window).scrollTop();
    $(window).scrollTop(tempScrollTop);
    var fixed = document.getElementById('fixed--nav');
       fixed.addEventListener('touchmove', function(e) {
       e.preventDefault();
    }, false);