CSS overflow-x:hidden在移动设备上不起作用

我放了一个汉堡包菜单给手机看。当菜单关闭时,它就不在屏幕上了。但是我仍然可以在x轴上滚动,尽管有"overflow-x: hidden;“。在PC浏览器上,即使我启用了"mobile-view“,它也能正常工作:

?

(无滚动条)

但在电话上却失败了:

?

(出现滚动条)

我找不到问题所在。我也尝试过-ms-scroll-limit: 0 0 0 0;

HTML:

<body>
    <nav>
        <ul class="nav-links">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
        <div class="burger">
            <div class="top-line"></div>
            <div class="bottom-line"></div>
        </div>
    </nav>
    <main>
        ...
    </main>
    <script src="app.js"></script>
</body>

CSS:

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

nav
{
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right, rgba(76, 181, 230, 0.5), rgba(45, 76, 214, 0.5));
    min-height: 8vh;
    width: 100%;
}

nav li
{
    list-style: none;
}

.nav-links
{
    display: flex;
    justify-content: space-around;
    width: 50%;
    transition: 0.2s width;
}

.nav-links a
{
    color: white;
    font-weight: 600;
    text-decoration: none;
    filter: drop-shadow(0px 0px 4px #00000017)
}

.burger 
{
    cursor: pointer;
    margin-left:auto; 
    margin-right:20px;
    display: none;
}

.burger div
{
    width: 25px;
    height: 1.5px;
    margin: 8px;
    background-color: white;
    transition: all 0.2s ease;
}

body
{
    font-family: 'Montserrat', sans-serif;
    background: white;
    background-image: url("/Grafica/SVG/bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0%;
    background-attachment: fixed;
}


@media screen and (max-width:1024px)
{
    .nav-links
    {
        width: 70%;
    }
}

@media screen and (max-width:768px)
{
    body
    {
        overflow-x: hidden;

    }

    .nav-links
    {
        position: absolute;
        right: 0;
        height: 92vh;
        top: 8vh;

        background-image: linear-gradient(to bottom left, #96A6EB, rgb(102, 199, 238));
        display: block;
        text-align: center;
        width: 100%;

        transform: translateX(100%);
        transition: all 0.3s ease;
    }

    .nav-links a
    {
        font-size: 18px;
    }

    .nav-links a:hover
    {
        font-size: 24px;
    }


    .nav-links li
    {
        margin: 40px;
    }


    .burger
    {
        display: block;
    }
}

转载请注明出处:http://www.ommtl.com/article/20230526/1555214.html