javascript - 从屏幕外滑入移动菜单 - 溢出问题

Question

鉴于以下简单演示，我正在努力实现所需的行为，其中我有一个使用 translateX 位于屏幕外的菜单。

有几个问题 - 首先，如果我在正文上设置 overflow:hidden ，它会阻止显示菜单，而只是在菜单切换打开时显示空白。

如果我删除overflow:hidden，那么我就会遇到这样的问题:由于translateX行为，用户可以滚动超出正文的宽度(例如，如果您切换打开菜单，然后将主体滑动/移动回原位，无需使用菜单切换)。

我还希望菜单在打开时可以滚动，但部分隐藏的页面内容的其余部分可以固定在适当的位置。当菜单切换打开时，我在容器上设置了 position:fixed 但没有效果。

感谢您提供的任何帮助，因为我正为此而兜圈子!

jQuery(document).ready(function($) {

  $('.mobile-menu-toggle').on('click', function(e) {
    e.preventDefault();

    $('body').toggleClass('mobile-menu-open');
  });

  // Close mobile menu if user clicks anywhere outside of the visible menu
  $(document).on('click touchstart', function(e) {

    if (!$(e.target).closest('.mobile-menu-toggle').length &&
      !$(e.target).closest('.main-menu-mobile').length) {


      if ($('body').hasClass('mobile-menu-open')) {
        $('body').removeClass('mobile-menu-open');
      }
    }
  });

});

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  min-height: 100%;
}

body {
  font-family: "Helvetica Neue", "Helvetica", sans-serif;
  position: relative;
  overflow: hidden;
  margin: 0;
  transition-duration: 200ms;
  transform: translateX(0);
}

body.mobile-menu-open {
  transform: translateX(80%);
}

body.mobile-menu-open .container {
  position: fixed;
  overflow: hidden;
}

.header:before,
.header:after {
  content: " ";
  display: table;
}

.header {
  top: 0;
  /*transition: top 0.2s ease-in-out;*/
  /*transition: none;*/
  background: red;
}

.main-menu-mobile {
  background-color: #ddd;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0;
  min-height: 100vh;
  transform: translateX(-100%);
  width: 80%;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<header class="header">
  <div class="mobile-nav">
    <a href="#" class="mobile-menu-toggle">Menu</a>
  </div>

  <ul class="main-menu-mobile">
    <li>
      <a href="/test">Test</a>
      <div class="dropdown">
        <div class="wrapper">
          <div class="menu-subcategory">
            <h4><a href="/sub">Sub Cat</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/test">Test 3</a>
              </li>
              <li>
                <a href="/test">Test 4</a>
              </li>
              <li>
                <a href="/test">Test 5</a>
              </li>
              <li>
                <a href="/test">Test 6</a>
              </li>
              <li>
                <a href="/test">Test 7</a>
              </li>
              <li>
                <a href="/test">Test 8</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="/test">Test 2</a>
      <div class="dropdown">
        <div class="wrapper">
          <div class="menu-subcategory">
            <h4><a href="/sub">Sub Cat</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
              <li class="view-all"><a href="/women/jackets">View All Jackets &gt;&gt;</a></li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
          <div class="menu-subcategory">
            <h4><a href="/jackets">Jackets</a></h4>
            <ul>
              <li>
                <a href="/test">Test</a>
              </li>
              <li>
                <a href="/test">Test 2</a>
              </li>
              <li>
                <a href="/girls">Girls</a>
              </li>
              <li>
                <a href="/boys">Boys</a>
              </li>
              <li>
                <a href="/footwear">Footwear</a>
              </li>
              <li>
                <a href="/equipment">Equipment</a>
              </li>
              <li>
                <a href="/activities">Activities</a>
              </li>
              <li>
                <a href="/clearance">Clearance</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>
    <li>
      <a href="/test">Test 3</a>
    </li>
    <li>
      <a href="/test">Test 4</a>
    </li>
    <li>
      <a href="/test">Test 5</a>
    </li>
    <li>
      <a href="/test">Test 6</a>
    </li>
    <li>
      <a href="/test">Test 7</a>
    </li>
    <li>
      <a href="/test">Test 8</a>
    </li>
  </ul>
</header>

<div class="container">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida est mauris, nec blandit dui elementum vitae. Pellentesque aliquet magna vel lorem porta, nec scelerisque augue volutpat. Mauris sed eros a erat bibendum venenatis vulputate nec dui.
    Maecenas tristique at leo et finibus. Maecenas euismod volutpat tortor, non aliquet arcu commodo quis. Aliquam mollis condimentum orci at efficitur. Fusce turpis sapien, ornare ac tincidunt sed, consectetur sit amet purus. Vivamus egestas at lorem
    non hendrerit.</p>
</div>

Answer 1

因此，一种方法是您可以将您尝试操作的元素包装在容器中(您会在旧网站中经常看到这种情况，其顶层称为“包装器”)。我考虑到这一点更新了您的代码片段，并清理了 CSS 以使其正常工作。

<div class="wrapper">
  <header></header>
  <div>blah</div>
  <div>blah</div>
</div>

https://jsfiddle.net/646tueyL/

我记得当您必须处理响应能力时，这种方法会导致问题，可能有更高级的方法使用 JS 或重新考虑您的标记结构。