javascript – 防止在后台滚动

function openNav() {
  document.getElementById('UI').className = "open";
}

function closeNav() {
  document.getElementById('UI').className = "closed";
}

body {
  font-family: monospace;
  padding: 75px;
  word-wrap: break-word;
}
#UI {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .5s;
}
#UI.closed {
  background-color: rgba(255,255,.0);
}
#UI.open {
  background-color: rgba(05,55,105,.75);
}
#UI button {
  font-size: 30;
  width: 50px;
  height: 50px;
  border: 0;
  outline: 0;
  color: white;
  background-color: blue;
  transition: all .5s;
  cursor: pointer;
  position: fixed;
}
#UI button:hover {
  background-color: white;
  color: blue;
  Box-shadow: 0px 0px 15px blue;
}
#openNavBtn {
  top: 5px;
}
#topBtn {
  top: 5px;
  right: 5px;
}
#nav {
  position: fixed;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: blue;
  transition: all .5s;
}
#closeNavBtn {
  position: fixed;
  left: -50px;
}
#UI.closed #openNavBtn {
  left: 5px;
}
#UI.closed #topBtn {
  right: 5px;
}
#UI.closed #nav {
  left: -300px;
  Box-shadow: 0px 0px 15px black;
}
#UI.closed #closeNavBtn {
  left: -50px;
}
#UI.open #openNavBtn {
  left: -55px;
}
#UI.open #topBtn {
  right: -55px;
}
#UI.open #nav {
  left: 0;
  Box-shadow: 0px 0px 15px black;
}
#UI.open #closeNavBtn {
  left: 250px;
}


使用当前代码,当导航打开时,正文滚动 – 我该如何防止这种情况？
附：请原谅我的聚类编码风格.如果有人对如何保持清洁有任何建议,请分享.
P.P.S.我已经问了整个问题,但它说我需要更多细节.将来我该怎样避免这种情况？


最佳答案
您可以使导航切换还添加和删除正文上的类,并使用它来设置overflow：隐藏在body标签上,如果这是您要求的：

function openNav() {
  document.getElementById('UI').className = "open";
  document.body.className = 'navopen';
}

function closeNav() {
  document.getElementById('UI').className = "closed";
  document.body.className = '';
}
body {
  font-family: monospace;
  padding: 75px;
  word-wrap: break-word;
}
body.navopen {
  overflow: hidden;
}
#UI {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .5s;
}
#UI.closed {
  background-color: rgba(255,.75);
}
#UI button {
  font-size: 30;
  width: 50px;
  height: 50px;
  border: 0;
  outline: 0;
  color: white;
  background-color: blue;
  transition: all .5s;
  cursor: pointer;
  position: fixed;
}
#UI button:hover {
  background-color: white;
  color: blue;
  Box-shadow: 0px 0px 15px blue;
}
#openNavBtn {
  top: 5px;
}
#topBtn {
  top: 5px;
  right: 5px;
}
#nav {
  position: fixed;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: blue;
  transition: all .5s;
}
#closeNavBtn {
  position: fixed;
  left: -50px;
}
#UI.closed #openNavBtn {
  left: 5px;
}
#UI.closed #topBtn {
  right: 5px;
}
#UI.closed #nav {
  left: -300px;
  Box-shadow: 0px 0px 15px black;
}
#UI.closed #closeNavBtn {
  left: -50px;
}
#UI.open #openNavBtn {
  left: -55px;
}
#UI.open #topBtn {
  right: -55px;
}
#UI.open #nav {
  left: 0;
  Box-shadow: 0px 0px 15px black;
}
#UI.open #closeNavBtn {
  left: 250px;
}

javascript – 防止在后台滚动

猜你在找的JavaScript相关文章