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

您已经使用了相应的元数据并使用了溢出数据。

所以也许你可以试试这个。

body {
     width:100%
}

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

1 个答案: