javascript - 触发菜单时禁用滚动

Question

我正在尝试制作一个全屏菜单，并且我设法获得了 width: 100%; 和 min-height: 100%; 的 block .现在我的页面有点长，所以当我向下滚动时，我会看到全屏菜单，不适用于页面的其余部分。

nav block 在 container

之外

<nav id="site-nav" class="clearfix" style="display: block;">
<div class="menu-wrap">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-44" class="menu-item current_page_item menu-item-home"><a href="#">Home</a></li>
        <li id="menu-item-18" class="menu-item"><a href="#">UI/UX Designer</a></li>
        <li id="menu-item-21" class="menu-item"><a href="#">Front-End DEV</a></li>
        <li id="menu-item-25" class="menu-item"><a href="#">Contact</a></li>
    </ul>
</div>
<!-- end .menu-wrap -->

CSS:

#site-nav {
    display: none;
    background: rgba(34, 34, 34, 1);
    position: absolute;
    z-index: 1;
    width: 100%;
    min-height: 100%;
    top: 0px;
}

有没有办法在触发此菜单时禁用滚动？或者一些 CSS 技巧？

注意:作为最终结果，我希望 body 为 100%，仅当菜单 block 被触发时。有什么解决方案吗？

Answer 1

禁用滚动的最简单方法是在不应包含滚动的元素(它可以是 body 标记)上使用 overflow: hidden;。

但在这种情况下，我建议设置 position: fixed; 而不是 absolute，这样您的菜单将始终全屏显示(但不会隐藏滚动条)。这完全是最简单的方法，不会像 body with overflow:hidden; 和 max-width: 100%; 那样造成问题。