Question

我有一个汉堡菜单，单击它可从右侧滑动。我已将主体和html设置为<button>Test</button>，它在平板电脑或台式机视图上均能完美运行，但在移动视图上，您可以向右滚动并实际上看到应该隐藏的导航部分。

我试图用div包裹主体，然后将overflow-x：隐藏到该div上，但这也不起作用。另外，使用@media查询指定移动设备大小，然后在主体上应用溢出功能无效。

有人可以帮我吗？

编辑：此人与我https://www.youtube.com/watch?v=5h2NwVIl4hU有完全相同的问题

Answer 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;
}

溢出-x隐藏在移动设备上不起作用

1 个答案: