我不能使用overflow-x:隐藏在主体上隐藏我的菜单

Question

即使我将overflow-x:隐藏在我的身体上，水平滚动仍然有效，我不能给它一个解决方案。

我一直在通过互联网寻找解决方案，但我解决不了这个问题。这就是为什么我在这里转弯，这样你就可以帮助我了。非常感谢!

附件中的html、scss和javascript：

HTML：

<!-- HEADER -->

<div id="home" class="container-fluid home__hero">
    <nav class="menu">
        <div>
            <h4 class="logoMenu">Guinda Social Media</h4>
        </div>
        <ul class="nav-links">
            <li class="linkMenu liHome"><a href="#home" class="linkHome">Home</a></li>
            <li class="linkMenu liAbout"><a href="#about" class="linkAbout">About</a></li>
            <li class="linkMenu liTrabajos"><a href="#trabajos" class="linkTrabajos">Trabajos</a></li>
            <li class="linkMenu liContacto"><a href="#contacto" class="linkContacto">Contacto</a></li>
        </ul>
        <div class="contenedorBurger">
            <div class="burgerBtn">
                <div class="linea1"></div>
                <div class="linea2"></div>
                <div class="linea3"></div>
            </div>
        </div>
    </nav>

    <!-- FIN HEADER -->

    <!-- HERO -->

    <div class="row justify-content-center align-content-center">
        <div class="col-sm-12 col-md-12 col-lg-12 home__hero__col1" data-aos="fade-up" data-aos-duration="3000">
            <h1><span class="home__hero__h1--social">social</span><span
                    class="home__hero__h1--guinda flicker-2">guinda</span><span
                    class="home__hero__h1--media">media</span>
            </h1>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 home__hero__col2">
                <section class="example example--2 bounce-top">
                    <span class="scroll-icon">
                        <span class="scroll-icon__dot"></span>
                    </span>
                </section>
            </div>
        </div>
    </div>
</div>

SCSS：

@导入"variables.scss"；

html {
    scroll-behavior: smooth;
}

.menu {
    display: flex;
    flex-direction: row;
    padding-right: 30px;
    padding-top: 30px;
    padding-left: 30px;
    padding-bottom: 30px;
}

.logoMenu {
    font-family: $fuente;
    color: $rojo;
    font-size: 1.6rem;
    font-weight: bold;
    font-style: italic;
}

.nav-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    list-style: none;
}

ul li {
    margin-right: 20px;
    text-decoration: none;
    margin-bottom: 50px;
}

ul li a {
    font-family: $fuente;
    font-size: 1.4rem;
    color: $rojo;
    font-style: italic;
}

ul li a:hover {
    font-family: $fuente;
    font-size: 1.4rem;
    color: $rojo;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
}

.burgerBtn {
    display: none;
}

/* MEDIA QUERIES */

/* IPAD */

@media (min-width: 768px) and (max-width: 991.98px) {
    
    .menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-right: 30px;
        padding-top: 30px;
        padding-left: 30px;
        padding-bottom: 30px;
    }
    
    .nav-links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        list-style: none;
        position: absolute;
        height: 100vh;
        width: 100%;
        top: 15vh;
        right: 0;
        background-color: $rojo;
        z-index: 1;
        transform: translate(100%);
        transition: transform 0.5s ease-in;
    }
    
    .liHome {
        margin-right: 20px;
        text-decoration: none;
        margin-bottom: 50px;
        transform: translate(500px);
        transition: transform 1s ease-in-out;
    }

    .liAbout {
        margin-right: 20px;
        text-decoration: none;
        margin-bottom: 50px;
        transform: translate(500px);
        transition: transform 1s ease-in-out 0.2s;
    }

    .liTrabajos {
        margin-right: 20px;
        text-decoration: none;
        margin-bottom: 50px;
        transform: translate(500px);
        transition: transform 1s ease-in-out 0.4s;
    }

    .liContacto {
        margin-right: 20px;
        text-decoration: none;
        margin-bottom: 50px;
        transform: translate(500px);
        transition: transform 1s ease-in-out 0.6s;
    }

    .active {
        transform: translate(0%);
    }

    
    ul li a {
        font-family: $fuente;
        font-size: 1.4rem;
        color: white;
        font-style: italic;
    }
    
    ul li a:hover {
        font-family: $fuente;
        font-size: 1.4rem;
        color: white;
        text-decoration: none;
        font-weight: bold;
        letter-spacing: 5px;
    }
    
    .logoMenu {
        font-family: $fuente;
        color: $rojo;
        font-size: 1.6rem;
        font-weight: bold;
        font-style: italic;
        margin-top: 10px;
    }
    
    /* ICONO BURGER */
    
    .contenedorBurger {
        display: flex;
        margin-left: auto;
    }
    
    .linea1 {
        background-color: $rojo;
        width: 25px;
        height: 3px;
        transition: transform 0.2s ease-in;
    }
    
    .linea2 {
        background-color: $rojo;
        width: 25px;
        height: 3px;
        margin-top: 5px;
        margin-bottom: 5px;
        transition: opacity 0.2s ease-in;
    }
    
    .linea3 {
        background-color: $rojo;
        width: 25px;
        height: 3px;
        transition: transform 0.2s ease-in;
    }

    .toggle .linea1  {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .toggle .linea2 {
        opacity: 0;
    }
    
    .toggle .linea3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    
    .burgerBtn {
        display: block;
        cursor: pointer;
    }

    .nav-active {
        transform: translateX(0%);
    }
}

/* CELULAR */

@media (max-width: 768px) {
    
    .menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-right: 30px;
        padding-top: 30px;
        padding-left: 30px;
        padding-bottom: 30px;
    }
    
    .nav-links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        list-style: none;
        position: absolute;
        height: 100vh;
        width: 100%;
        top: 15vh;
        right: 0;
        background-color: $rojo;
        z-index: 1;
        transform: translate(100%);
        transition: transform 0.5s ease-in;
    }

    .liHome {
        margin-right: 20px;
        text-decoration: none;
        margin-bottom: 50px;
        transform: translate(500px);
        transition: transform 1s ease-in-out;
    }

    .liAbout {
        margin-right: 20px;
        text-decoration: none;
        margin-bottom: 50px;
        transform: translate(500px);
        transition: transform 1s ease-in-out 0.2s;
    }

    .liTrabajos {
        margin-right: 20px;
        text-decoration: none;
        margin-bottom: 50px;
        transform: translate(500px);
        transition: transform 1s ease-in-out 0.4s;
    }

    .liContacto {
        margin-right: 20px;
        text-decoration: none;
        margin-bottom: 50px;
        transform: translate(500px);
        transition: transform 1s ease-in-out 0.6s;
    }

    .active {
        transform: translate(0%);
    }
    
    ul li a {
        font-family: $fuente;
        font-size: 1.4rem;
        color: white;
        font-style: italic;
    }
    
    ul li a:hover {
        font-family: $fuente;
        font-size: 1.4rem;
        color: white;
        text-decoration: none;
        font-weight: bold;
        letter-spacing: 5px;
    }
    
    .logoMenu {
        font-family: $fuente;
        color: $rojo;
        font-size: 1.6rem;
        font-weight: bold;
        font-style: italic;
        margin-top: 10px;
    }
    
    /* ICONO BURGER */
    
    .contenedorBurger {
        display: flex;
        margin-left: auto;
    }
    
    .linea1 {
        background-color: $rojo;
        width: 25px;
        height: 3px;
        transition: transform 0.2s ease-in;
    }
    
    .linea2 {
        background-color: $rojo;
        width: 25px;
        height: 3px;
        margin-top: 5px;
        margin-bottom: 5px;
        transition: opacity 0.2s ease-in;
    }
    
    .linea3 {
        background-color: $rojo;
        width: 25px;
        height: 3px;
        transition: transform 0.2s ease-in;
    }

    .toggle .linea1  {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .toggle .linea2 {
        opacity: 0;
    }
    
    .toggle .linea3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    
    .burgerBtn {
        display: block;
        cursor: pointer;
    }

    .nav-active {
        transform: translateX(0%);
    }
}

JS：

var burger = document.querySelector('.burgerBtn')
var nav = document.querySelector('.nav-links')
var linkHome = document.querySelector('.linkHome')
var linkAbout = document.querySelector('.linkAbout')
var linkTrabajos = document.querySelector('.linkTrabajos')
var linkContacto = document.querySelector('.linkContacto')
var liActiveHome = document.querySelector('.liHome')
var liActiveAbout = document.querySelector('.liAbout')
var liActiveTrabajos = document.querySelector('.liTrabajos')
var liActiveContacto = document.querySelector('.liContacto')

burger.addEventListener('click', openMenu)

function openMenu() {
    nav.classList.toggle('nav-active')
    burger.classList.toggle('toggle')
    liActiveHome.classList.add('active')
    liActiveAbout.classList.add('active')
    liActiveTrabajos.classList.add('active')
    liActiveContacto.classList.add('active')
}

linkHome.addEventListener('click', function closeMenu() {
    nav.classList.remove('nav-active')
    burger.classList.remove('toggle')
})

linkAbout.addEventListener('click', function closeMenu() {
    nav.classList.remove('nav-active')
    burger.classList.remove('toggle')
})

linkTrabajos.addEventListener('click', function closeMenu() {
    nav.classList.remove('nav-active')
    burger.classList.remove('toggle')
})

linkContacto.addEventListener('click', function closeMenu() {
    nav.classList.remove('nav-active')
    burger.classList.remove('toggle')
})

Answer 1

您的问题可以通过将overflow-x替换为display style值来解决。

JavaScript示例：

document.getElementsByTagName("p").style.display =“无”

Html甚至可以显示带有overflow-x或visibility隐藏值的对象。

在html中，只需在style=“”内添加display:none (

Answer 2

这里有一个关于主体元素的原因：http://tpcg.io/SCsHMMzO的例子，如果我没理解正确的话，只需将overflow-x: hidden替换为你的主元素显示: none，它包含了你试图隐藏的所有元素。没有办法通过使用overflow-x样式值来使滚动条消失。