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

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')) {

    $('body').css('overflow', 'hidden');

} else {

    $('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{

    overflow: hidden;

}