Question

我在移动视图中放了一个汉堡菜单。菜单关闭时，它不在屏幕上。但是，尽管“ overflow-x：hidden;”，我仍然可以在x轴上滚动。在PC浏览器上，即使我启用了“移动视图”，它也可以正常工作：

Gif on PC "mobile-view" （无滚动条）

但是在电话上失败了：

Gif on actual phone （出现滚动条）

我找不到问题。我也尝试过-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;
    }
}

Answer 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切换功能在CSS中调用函数之前，就像这样：

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

同时，现在我直接在js代码中完成所有工作。

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

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

1 个答案: