Question

＆＃13;

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

＆＃13;

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

＆＃13;

<html>

<body>
  <div id="UI" class="closed">
    <div id="nav">
      <button id="closeNavBtn" onclick="closeNav()">&times;</button>
    </div>
    <button id="openNavBtn" onclick="openNav();">&#9776;</button>
    <button id="topBtn">&#8613;</button>
  </div>
  <h1>SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL

＆＃13;

使用当前代码，身体在nav打开时滚动 - 我该如何防止这种情况？

P.S。请原谅我的聚类编码风格。如果有人对如何保持清洁有任何建议，请分享。

P.P.S。我已经问过我的整个问题，但它说我需要更多细节。我将来如何避免这种情况？

Answer 1

你可以让你的导航切换还添加和删除正文上的一个类，并使用它在正文标记上设置overflow: hidden，如果这是您要求的：

＆＃13;

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

＆＃13;

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

＆＃13;

<html>

<body>
  <div id="UI" class="closed">
    <div id="nav">
      <button id="closeNavBtn" onclick="closeNav()">&times;</button>
    </div>
    <button id="openNavBtn" onclick="openNav();">&#9776;</button>
    <button id="topBtn">&#8613;</button>
  </div>
  <h1>SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL

＆＃13;

Answer 2

您可以切换document.body.style.overflow = 'hidden';在你的open / closeNav函数中：

＆＃13;

function openNav() {
  document.getElementById('UI').className = "open";
  document.body.style.overflow = 'hidden';
}

function closeNav() {
  document.getElementById('UI').className = "closed";
  document.body.style.overflow = 'auto';
}

＆＃13;

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

＆＃13;

<html>

<body>
  <div id="UI" class="closed">
    <div id="nav">
      <button id="closeNavBtn" onclick="closeNav()">&times;</button>
    </div>
    <button id="openNavBtn" onclick="openNav();">&#9776;</button>
    <button id="topBtn">&#8613;</button>
  </div>
  <h1>SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL

＆＃13;

Answer 3

您是否尝试在UI打开时在body滚动事件上运行preventDefaults？

$("body").scroll(function(e){ 
  if($("#UI").hasClass("open"))
    e.preventDefault();
});

可能值得注意的是，此解决方案需要JQuery

防止在后台滚动

3 个答案: