移动端CSS overflow-x:hidden失效求助，已尝试多种解决方案

安全阿岳

2026-8-16

移动端汉堡菜单横向滚动问题解决

我开发了一个汉堡菜单，点击后通过translate动画从屏幕外滑入。桌面端响应式模拟显示正常，但真实移动端能横向滚动看到屏幕外的菜单。试过以下方案均无效：

给html、body添加width:100%; overflow-x: hidden;，搭配position属性时会破坏导航栏格式
给#root设置overflow-x: hidden;
在body内添加wrapper容器并设置.wrapper{position: fixed; overflow-x: hidden;}
设置包含minimum-scale和user-scalable的viewport元标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, user-scalable=no">

我的代码

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="style.css" asp-append-version="true" />
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans&display=swap" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
    <title>Justin</title>
</head>

<header>    

</header>

<body>
    <div class="wrapper">
<nav>
    <div class="logo">Unique Logo</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Content</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>
<script src="app.js"></script>

<div class="card" style="width:fit-content">
    <img src="BW Boathouse16X20.jpg" alt="Avatar">
    <div class="container">
      <h4><b>Justin</b></h4>
      <p>Boathouse</p>
    </div>
  </div> 
    </div>
</body>
</html>

CSS代码（保留无效尝试）

/* The navigation menu */
 *{
    padding: 0;
    margin:0;
    box-sizing: border-box;
    
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
 }

 #root{
   overflow-x: hidden;
 }


html, body{
   width:100%;
   overflow-x: hidden;
}


 nav{
    display:flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    background-color: whitesmoke;
    box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
 }

 .nav-links{
    display:flex;
    width: 30%;
    justify-content: space-around;
 }

 .nav-links a{
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgb(25, 25, 25)
 }

 .nav-links li{
    list-style: none;
 }

.burger{
    display: none;
}

.burger div{
    width: 25px;
    height: 2px;
    background-color: rgb(25, 25, 25);
    margin: 5px;
    border-radius: 1px; 
    transition: all .25s ease;   
}

 .logo{
    letter-spacing: 5px;
    font-size: 22px;
    font-weight: 600;
    color: rgb(25, 25, 25)
 }

h4{
   font-size: 16px;
}

p{
   font-size: 14px;
}

 .card {
   /* Add shadows to create the "card" effect */
   z-index: -1;
   box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
   transition: 0.3s;
   position: absolute;
   top: 10%;
   left: 50%;
   transform: translateX(-50%);
 }
 
 /* On mouse-over, add a deeper shadow */
 .card:hover {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 }
 
 /* Add some padding inside the card container */
 .container {
   display:flex;
   flex-direction: column;
   text-align: center;      
   padding: 8px;
 }

.card img{
   height:35vw;
}


 @media  screen and (max-width:1200px) {
   body{
      overflow-x: hidden;
  }
    .nav-links{
                width: 50%;
             }
 }

 @media  screen and (max-width:900px) {
   .wrapper{
      position: fixed;
      overflow-x: hidden;
   }
    html, body{
      width:100%;
      overflow-x: hidden;
    }
    nav{
        display:flex;
        justify-content: space-around;
        align-items: center;
        height: 7vh;;
        background-color: whitesmoke;
        box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
        width:100vw;
     }

     
     .card {
      /* Add shadows to create the "card" effect */
      z-index: -1;
      box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
      transition: 0.3s;
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
    }
    
    /* On mouse-over, add a deeper shadow */
    .card:hover {
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
    
    .card img{
      width:85vw;
      height:auto;
   }

    /* Add some padding inside the card container */
    .container {
      display:flex;
      flex-direction: column;
      text-align: center;      
      padding: 8px;
    }

.nav-links{
    position:absolute;
    right:0px;  
    height:25vh;
    top: 6vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: whitesmoke;
    transform: translateX(105%);
    transition: transform 0.5s ease-in;
    box-shadow: 0px 2px 4px -2px rgb(0,0,0,.35);

}

.nav-links li{
   width:100%;
   height: 7vh;
   box-sizing: border-box;
   opacity: 0;  
   text-align: center;  
   display:flex;
   align-items: center;
   justify-content: center;
}

.nav-links li:hover{
   background-color: lightgray;
}

.burger{
    display: block;
}

 }

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

 @keyframes navLinkFade{
    from{
    opacity: 0;
    transform: translateX(50px);
    }

    to{
    opacity: 1;
    transform: translateX(0px);
    }
 }

 @keyframes navLinkFadeOut{
   from{
   opacity: 1;
   transform: translateX(0px);
   }

   to{
   opacity: 0;
   transform: translateX(50px);
   }
}

.toggle .line1{
   transform: rotate(-45deg) translate(-5px,5px);
}
.toggle .line2{ 
   opacity: 0;
}
.toggle .line3{
   transform: rotate(45deg) translate(-5px,-5px);
}

JavaScript代码

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {
        //Toggle Nav
        nav.classList.toggle('nav-active');
        //Animate Links
        navLinks.forEach((link, index) => {
            if(link.style.animation){
                link.style.animation='';
            } else{
                link.style.animation=link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +.75}s`;
            }
         });
         //Burger Animate
        burger.classList.toggle('toggle');

    });
    


}

navSlide();

解决方案

问题核心：移动端下.nav-links是绝对定位，但未绑定到nav元素，导致它相对于body定位，body的overflow-x:hidden无法正确裁剪通过transform移出视口的元素。按以下步骤修改：

给nav添加相对定位和横向溢出隐藏
在基础nav样式中添加：

nav{
    position: relative; /* 让子元素绝对定位相对于nav */
    overflow-x: hidden; /* 裁剪超出nav的内容 */
    width: 100%; /* 替换移动端的100vw，避免视口宽度问题 */
}

调整移动端nav的样式
移除移动端媒体查询中nav的width:100vw，因为已经在基础样式中设置了width:100%，避免因vw单位导致的微小溢出。
修正.nav-links的transform数值
将移动端.nav-links的transform: translateX(105%);改为transform: translateX(100%);，确保菜单完全移出视口，不会留下可滚动的空间。
清理无效样式
- 移除.wrapper的position: fixed;，避免固定定位破坏页面布局
- 移除html, body的width:100%;，默认width:auto已能适配视口
- 移除#root的样式（你的代码中没有#root元素，无效）

修改后的核心CSS片段：

/* 基础nav样式修改 */
nav{
    display:flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    background-color: whitesmoke;
    box-shadow: 0 2px 4px -2px rgb(0,0,0,.35);
    position: relative;
    overflow-x: hidden;
    width: 100%;
}

/* 移动端媒体查询内修改 */
@media  screen and (max-width:900px) {
   /* 移除.wrapper的position:fixed */
   .wrapper{
      overflow-x: hidden;
   }
    html, body{
      overflow-x: hidden; /* 保留即可，无需width:100% */
    }
    nav{
        height: 7vh; /* 仅保留高度修改，移除width:100vw */
     }

    /* 其他样式不变 */

.nav-links{
    position:absolute;
    right:0px;  
    height:25vh;
    top: 6vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: whitesmoke;
    transform: translateX(100%); /* 改为100% */
    transition: transform 0.5s ease-in;
    box-shadow: 0px 2px 4px -2px rgb(0,0,0,.35);
}

/* 其他样式不变 */
}

这样修改后，.nav-links会被nav的overflow-x:hidden裁剪，真实移动端就不会出现横向滚动的问题了。

内容的提问来源于stack exchange，提问作者ItsToka

移动端CSS overflow-x:hidden失效求助，已尝试多种解决方案

我的代码 #

HTML代码 #

CSS代码（保留无效尝试） #

JavaScript代码 #

解决方案 #

我的代码

HTML代码

CSS代码（保留无效尝试）

JavaScript代码

解决方案