如何在菜单中阻止正文滚动

Question

当我在菜单中并尝试同时滚动整个页面时。我尝试添加溢出隐藏，但我认为它被忽略了。我在互联网上查找了所有内容，但我找不到任何有用的东西。如果我添加隐藏在正文中的溢出，整个页面将停止滚动。

CSS

nav {
    display: flex;
    height: 120px;
    width: 100%;
    background: #1b1b1b;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px 0 100px;
    flex-wrap: wrap;
}

nav .logo {
    color: #fff;
    font-size: 35px;
    font-weight: 600;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

nav ul li {
    margin: 0 5px;
}

nav ul li a {
    color: #f2f2f2;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 5px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

nav ul li a.active,
nav ul li a:hover {
    color: #111;
    background: #fff;
}

nav .menu-btn i {
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: none;
}

input[type="checkbox"] {
    display: none;
}

@media (max-width: 1000px) {
    nav {
        padding: 0 40px 0 50px;
    }
}

@media (max-width: 920px) {
    nav .menu-btn i {
        display: block;
    }
    

    #click:checked~.menu-btn i:before {
        content: "\f00d";
    }

    nav ul {
        position: fixed;
        top: 80px;
        left: -100%;
        background: #111;
        height: 100vh;
        width: 100%;
        text-align: center;
        display:block;
        transition: all 0.3s ease;
        z-index: 2;
        overflow: hidden;
    }
    
      
    #click:checked~ul {
        left: 0;
    }

    nav ul li {
        width: 100%;
        margin: 40px 0;
    }

    nav ul li a {
        width: 100%;
        margin-left: -100%;
        display: block;
        font-size: 20px;
        transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    #click:checked~ul li a {
        margin-left: 0px;
    }

    nav ul li a.active,
    nav ul li a:hover {
        background: none;
        color: rgb(255, 0, 0);
    }
}

HTML

<nav>
        <div class="logo">
            NavBar
        </div>
        <input type="checkbox" id="click">
        <label for="click" class="menu-btn">
            <i class="fas fa-bars"></i>
        </label>
        <ul>
            <li><a class="active" href="#">Acasa</a></li>
            <li><a href="#">Prices</a></li>
            <li><a href="#">General</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

如何解决这个问题？ 谢谢

Answer 1

我相信你可以用 JavaScript 来实现这一点，当菜单切换打开时，你将溢出设置为隐藏在主体上，并在菜单关闭时将其删除。

尝试下面的代码；

const checkbox = document.getElementById('click');

checkbox.addEventListener('change', function() {
    document.body.style.overflow = this.checked ? 'hidden' : 'auto';
});

脚本必须位于html的body标签中，当我这样做时，我通常将其放在body标签之后，在任何其他代码之前，这只是个人喜好，但我相信它可以放在任何地方。

还要记得删除overflow:hidden;来自 css 文件中的 nav ul。

或者，您可以查看 W3 学校的如何创建响应式顶部导航。

链接：https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

希望有帮助:)