将固定内容隐藏在移动设备上的Div后面

Question

我建立了一个导航，该导航固定在站点包装程序的后面。 单击菜单链接后，站点包装器将滑过以显示固定的菜单内容。 除了在触摸屏上可以将屏幕（站点包装程序）拖动到侧面以显示后面的固定内容外，它的工作原理非常好。 有没有一种方法可以锁定屏幕以不允许水平触摸？ 下面的代码。

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

HTML

<ul class="navigation">
  <img src="img/splashRed.svg" alt="" />
  <li class="nav-item"><a href="#about">Who</a></li>
  <li class="nav-item"><a href="#services">What</a></li>
  <li class="nav-item"><a href="#approach">Approach</a></li>
  <li class="nav-item"><a href="#clients">Clients</a></li>
  <li class="nav-item"><a href="#contact">Contact</a></li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<div class="site-wrap"> <!--content-->

CSS:
body {
  overflow-x: hidden;
}
.navigation {
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  padding-top:10px;
  list-style: none;
  background: white;
  padding:0;
  margin:0;
}
.site-wrap {
  height:100%;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  background-color: white;
  position: relative;
  top: 0;
  bottom: 100%;
  right: 0;
  z-index: 1;
}
.nav-trigger {
  position: fixed;
  clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
  position: fixed;
  right: 45px; top: 45px;
  z-index: 2;
  height:70px;
  width: 70px;
  cursor: pointer;
  background-image: url("menuCircle.png");
  background-size: contain;
}
.nav-trigger + label, .site-wrap {
  transition: right 0.2s;
}
.nav-trigger:checked + label {
  right: 250px;
}
.nav-trigger:checked ~ .site-wrap {
  right: 250px;
}

Answer 1

您已经使用了适当的meta并且也使用了溢出。

所以也许您可以尝试一下。

body {
     width:100%
}