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

【问题标题】：CSS overflow-x:hidden doesn't work on mobileCSS overflow-x:hidden 在移动设备上不起作用
【发布时间】：2019-08-14 17:05:34
【问题描述】：

我为移动视图放置了一个汉堡菜单。当菜单关闭时，它不在屏幕上。但是尽管“溢出-x：隐藏；”，我仍然可以在 x 轴上滚动。在 PC 浏览器上它工作正常，即使我启用“移动视图”：

（没有滚动条）

但在手机上却失败了：

（出现滚动条）

我无法发现问题。我也试过-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;
    }
}

【问题讨论】：

你是不是这样把名字为viewport的meta标签放到了html中？
@Scruffy 是的，这是我的头：html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <META HTTP-EQUIV=”Expires” CONTENT=”0″> <META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”> <META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache”> <title>onStage - Tieniti organizzato</title> <link rel="stylesheet" href="/style_new.css"> <link rel="shortcut icon" type="image/png" href="/Grafica/favicon.png"> </head>
在 CSS 动画结束后将 display:none 属性添加到 sidenav。
@keanu_reeves 你是什么意思？在transition:all 0.3s ease 之后？因为动画的发生是因为 100% 到 0% 的转换形式和过渡属性。
在 javascript 的帮助下，您可以启动一个函数，该函数将 1) 等待 0.3 秒和 2) 隐藏 sidenav。

标签： html css overflow hidden

【解决方案1】：

好的，我在 javascript 中使用不同的方法解决了我的问题：

const navlinks = document.getElementById("nav-links");
var out = false;

burger.addEventListener("click", () => {

    if(out == false)
    {
        //Show menu
        navlinks.style.display = "block";
        setTimeout(function(){navlinks.style.transform = "translateX(0%)";}, 10);

        out = true;
    }
    else
    {
        //Hide menu
        navlinks.style.transform = "translateX(100%)";
        setTimeout(function(){navlinks.style.display = "none";}, 300);
        out = false;
    }

在我使用 javascript toggle 在 CSS 中调用函数之前，就像：

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

同时，现在我直接在 js 代码中做所有的事情。

现在我必须在不同的设备上对其进行测试，因为我注意到在更便宜的手机上该网站的显示效果不佳。我不知道为什么。

【讨论】：