All geek questions in one place

Prevent scrolling in the background

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()">&times;</button> </div> <button id="openNavBtn" onclick="openNav();">&#9776;</button> <button id="topBtn">&#8613;</button> </div> <h1>

Using the current code, the body scrolls when you open nav - How to prevent this?

PS Excuse my clustered coding style. If anyone has tips on how to keep it clean, please share.

PPS I already asked my whole question, but he says that I need more details. How should I avoid this in the future?

+5
source share
3 answers

You can make your navigation switch also add and remove a class on the body and use it to set overflow: hidden in the body tag, if that is what you request:

 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, 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()">&times;</button> </div> <button id="openNavBtn" onclick="openNav();">&#9776;</button> <button id="topBtn">&#8613;</button> </div> <h1>
+1
source

You can switch document.body.style.overflow = 'hidden' ; in your open / closeNav functions:

 function openNav() { document.getElementById('UI').className = "open"; document.body.style.overflow = 'hidden'; } function closeNav() { document.getElementById('UI').className = "closed"; document.body.style.overflow = 'auto'; } 
 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()">&times;</button> </div> <button id="openNavBtn" onclick="openNav();">&#9776;</button> <button id="topBtn">&#8613;</button> </div> <h1>
+1
source

Have you tried to run preventDefaults on a body scroll event like this when the user interface is open?

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

It may be worth noting that this solution requires jQuery

+1
source

Source: https://habr.com/ru/post/1238156/

More articles:


All Articles