全屏菜单打开时如何禁用正文滚动

Question

谁能告诉我打开全屏菜单时如何禁用滚动？下面的代码是我目前拥有的。我需要在菜单打开时禁用桌面和移动设备上的滚动，因为此时您可以在打开菜单时滚动，并且在您关闭菜单时会在不知不觉中最终出现在页面的不同部分。

<div class="navigation-container">

<input type="checkbox" id="main-navigation-toggle" class="btn btn--close" title="Toggle main navigation" />

<label for="main-navigation-toggle">

  <span></span>

</label>

<nav id="main-navigation" class="nav-main">

  <ul class="menu">

    <li class="menu__item">

      <a class="menu__link" href="#0">Home</a>

    </li>

    <li class="menu__item">

      <a class="menu__link" href="#0">About</a>

    </li>

    <li class="menu__item">

      <a class="menu__link" href="#0">Projects</a>

   

</li>

    <li class="menu__item">

      <a class="menu__link" href="#0">Contact</a>

    </li>

  </ul>

</nav>

</div>

Answer 1

我相信您想在切换菜单按钮时启用和禁用页面滚动。您可以通过使用 jQuery 来实现：$('input[id="main-navigation-toggle"]').on('change',function(e) {if ($(this).prop('checked')) {&nbsp; &nbsp; $('body').css('overflow', 'hidden');} else {&nbsp; &nbsp; $('body').css('overflow', 'auto');};});此代码将检查您提供的复选框输入id = main-navigation-toggle是否被选中，如果选中，则overflowbody 元素的 CSS 属性将设置为hidden，如果未选中，则该overflow属性将设置为auto，这意味着滚动菜单关闭时再次启用。

Answer 2

用这个属性修改这个类[id="main-navigation-toggle"] ~ label {cursor: pointer;position: absolute;right: 2rem;top: 0rem;z-index: 100;}正确的值已更改，我尝试了这个，或者如果你想禁用滚动body{&nbsp; &nbsp; overflow: hidden;}