5
Предотвращение прокрутки в фоновом режиме
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, 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;
}<html>
<body>
<div id="UI" class="closed">
<div id="nav">
<button id="closeNavBtn" onclick="closeNav()">×</button>
</div>
<button id="openNavBtn" onclick="openNav();">☰</button>
<button id="topBtn">↥</button>
</div>
<h1>SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLИспользуя текущий код, свитки тела в то время как nav открыт - Как это предотвратить?
P.S. Простите мой кластеризованный стиль кодирования. Если у кого-нибудь есть советы о том, как сохранить чистоту, пожалуйста, разделите.
P.P.S. Я уже задал весь свой вопрос, но он говорит, что мне нужно больше деталей. Как мне избежать этого в будущем?
Что вы хотите сделать? Вы хотите иметь всплывающее всплывающее окно и отключить прокрутку, когда всплывающее окно открыто? – tomysshadow