时间戳

首页 > 解决方案 > 试图使用溢出-X：“隐藏”；但它在移动屏幕上不起作用

javascript - 试图使用溢出-X：“隐藏”；但它在移动屏幕上不起作用

问题描述

当我尝试最小化overflow-x: hidden作品的宽度时，但是当我尝试在带有谷歌功能的小屏幕上显示它时，它会覆盖溢出 x 隐藏，我不知道为什么？！

@media (max-width:768px) {
    body{
       overflow-x: hidden;
    }
    .list{
        position: absolute;
        top: 8vh;
        right: 0;
        width: 50%;
        height: 92vh;
        color: #eee;
        transform: translate(100%);
        background-color: rgb(110, 164, 172);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        transition: transform 0.5s ease-in-out;
    }
    .list li{opacity: 0;}
    .burgger{display: block;}
}
<nav>
    <div class="logo">
        <a href="#">Logo</a>
    </div>
    <ul class="list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Services</a></li>
    </ul>
    <div class="burgger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>

标签： javascripthtmlcssnavbar

解决方案

<meta name="viewport">如果标签存在，移动设备上的浏览器会忽略 body 和 html 标签中的 overflow-x:hidden 。我建议你尝试：

html, body {
  overflow-x:hidden 
}

（不仅是身体）

或者在内部创建一个站点包装器 div 并将and<body>应用到该包装器而不是or/and 。overflow-x:hiddenposition: relative<body><html>

最好的问候， ykostov

推荐阅读