CSS 溢出-x：隐藏；不在移动设备上工作，尝试了我能在这里找到的所有解决方案

Question

Another post about this, though none of the solutions I've found in other posts have worked.另一篇关于此的帖子，尽管我在其他帖子中找到的解决方案都没有奏效。

Hamburger that translate/transforms a menu into view from offscreen.将菜单翻译/转换为屏幕外视图的汉堡包。

Desktop responsive/fake mobile looks fine, actual mobile allows X scroll to see the offscreen menu.桌面响应/假手机看起来不错，实际手机允许 X 滚动查看屏幕外菜单。

I am new to HTML/CSS.我是 HTML/CSS 的新手。

I have tried:我努力了：

Adding this with position fixed, absolute, relative: All broke the formatting of the navbar.添加 position fixed, absolute, relative: All 破坏了导航栏的格式。

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

Adding this:添加这个：

#root{
   overflow-x: hidden;
 }

Adding a wrapper inside the body:在体内添加一个包装器：

   .wrapper{
      position: fixed;
      overflow-x: hidden;
   }

Including the minimum and user-scalable items:包括最小和用户可扩展的项目：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, user-scalable=no">

My index:我的指数：

<!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>

My CSS with all the failed solutions still inside我的 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);
}

And the javascript和 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();

Answer 1

Right, the pitfalls of not knowing exactly what you're doing.是的，不知道你在做什么的陷阱。

Changing the position in the.nav-links under the media query更改媒体查询下the.nav-links中的position

@media  screen and (max-width:900px)

to fixed, solved the problem, potentially with one of the other fixes still in place.修复，解决了问题，可能还有其他修复程序之一。 I'll have to trial and error removing them until I find the winner.在找到获胜者之前，我将不得不反复试验删除它们。

.nav-links{
    position:fixed;
    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);
}

Literally none of the other things were needed.从字面上看，不需要其他任何东西。 Only changing my nav-links to仅将我的导航链接更改为

position: fixed;

fixed it.修复。

CSS 溢出-x：隐藏；不在移动设备上工作，尝试了我能在这里找到的所有解决方案

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-10-07 20:19:01

CSS 溢出-x：隐藏； 不在移动设备上工作，尝试了我能在这里找到的所有解决方案

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-10-07 20:19:01

CSS 溢出-x：隐藏；不在移动设备上工作，尝试了我能在这里找到的所有解决方案

解决方案1
0 已采纳 2022-10-07 20:19:01