溢出 -x hidden 在移动设备上不起作用答案

【问题标题】：Overflow -x hidden doesn't work on mobile溢出 -x hidden 在移动设备上不起作用
【发布时间】：2020-08-22 07:01:09
【问题描述】：

我有一个汉堡菜单，点击它会从右侧滑动。我已将 body 和 html 设置为 overflow-x:hidden; 它在平板电脑或桌面视图上完美运行，但在移动视图上，您可以向右滚动并实际看到应该隐藏的导航部分。

我尝试用 div 包裹主体并将 overflow-x: hidden 应用于该 div，但这也不起作用。还使用@media 查询指定移动设备大小，然后在正文上应用溢出不起作用。

谁能帮帮我？

编辑：这个人和我有同样的问题https://www.youtube.com/watch?v=5h2NwVIl4hU

【问题讨论】：

你试过了吗：“-ms-overflow-style: none;”和“滚动条宽度：无；”这样它就可以在手机上滚动。
我尝试使用它，但不幸的是没有用：/

标签： html css

【解决方案1】：

首先，see 一个类似的问题。

此外，使用 transform 完成此任务

https://jsfiddle.net/cLrkm8sf/

HTML：

<body>
   <a href="#menu">Open menu</a>
   <div class="menu" id="menu"></div>
</body>

CSS

.menu {
  width: 400px;
  height: 100vh;
  background-color: #CCC;
  transform: translateX(-100%);
}

.menu:target {
  transform: translateX(0);
  transition: transform .3s;
}

https://jsfiddle.net/6sre2mkz/

另一个建议。如果超出屏幕，指定一个固定位置，而不是绝对位置。

CSS

.menu {
  right: -400px;
  position: fixed; /* not absolute */
  top: 0;
  bottom: 0;
  background-color: #CCC;
  height: 100vh;
  width: 400px;
}
.menu:target {
  right: 0;
}

https://jsfiddle.net/a2nurvpg/

另一个例子，没有滚动

HTML

<a href="#menu">Open</a>
<div class="menu" id="menu">
  <ul>
    <li><a href="#close">Close</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
    <li><a href="#">Lorem ipsum.</a></li>
  </ul>
</div>

CSS

.menu {
  right: 0;
  padding: 20px;
  box-sizing: border-box;
  transform: translateX(100%);
  position: fixed;
  overflow-y: auto;
  top: 0;
  bottom: 0;
  background-color: #CCC;
  height: 100vh;
  width: 400px;
  transition: transform .2s;
}
.menu:target {
    transform: translateX(0);
}
.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu ul li {
    display: block;
}
.menu ul li a {
    display: block;
    padding: 10px 5px;
    color: #000;
    text-decoration: none;
}
[href="#close"] {
    font-size: 2em;
}

【讨论】：