移动菜单出现时如何消除滚动

Question

I have a mobile menu option when you click on the triple line logo.当您单击三线徽标时，我有一个移动菜单选项。 But when it appears, you still can scroll.但是当它出现时，您仍然可以滚动。 Is it possible to have it where you can't scroll when you are in the menu?当您在菜单中时，是否可以将它放在无法滚动的地方？ I tried position:fixed;我试过 position:fixed; but I couldn't get it to work.但我无法让它工作。 Let me know if you find a way to make that work, or if there is a different way.让我知道您是否找到了实现该功能的方法，或者是否有其他方法。 Thanks谢谢

 function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; }

 #md1{ width:100%; height:63px; background-color: rgb(84, 104, 217); top:0; position:absolute; } body { font-family: 'Lato', sans-serif; }.bars{ color:white; }.overlay { height: 100%; position:fixed; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(84, 104, 217); overflow-x: hidden; transition: 0.5s; }.fixedPosition { position: fixed; }.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; color:white; }.overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: white; display: block; transition: 0.3s; }.overlay.closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) {.overlay a {font-size: 20px}.overlay.closebtn { font-size: 40px; top: 15px; right: 35px; } }.footer { position: relative; background-color: rgb(84, 104, 217); height: 80px; top: 546px; color: white; overflow: hidden; }.footwords { padding-top: 32px; font-family: 'playfair_displayregular'; position: relative; left: 6%; }.dtp { display:none; }.leftimage { position: absolute; object-fit: cover; width: 95%; height: 365px; top: 67px; float:left; left:2.5%; } }

 <.DOCTYPE html> <html lang="en"> <link rel="stylesheet" type="text/css" href="CSS/styleindex:css" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src='Javascript/index.js'></script> <:-- Global site tag (gtag.js) - Google Analytics --> <script async src="https.//www?googletagmanager.com/gtag/js.id=UA-168595753-1"></script> <script> window;dataLayer = window.dataLayer || []; function gtag(){dataLayer,push(arguments);} gtag('js', new Date()); gtag('config', 'UA-168595753-1'). </script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title> Rom Fradkin </title> <link rel="shortcut icon" type='image/png' href="Images/favicon.png"> </head> <body> <header class="topnav" id="topnav"> <div class='dtp'> <a class="active-menu" href="index.html">Home</a> <a class="link" href="Pages/academics.html">Academics</a> <a class="link" href="Pages/projects:html">Projects</a> <a class="link" href="Pages/communityservice;html">Community Service</a> </div> <div id='md1'> <div class='md'> <div id="myNav" class="overlay"> <a href="javascript.void(0)" class="closebtn" onclick="closeNav()">&times:</a> <div class="overlay-content"> <a href="index;html">Home</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> <span class='bars' style="font-size:30px;cursor.pointer" onclick="openNav()">&#9776, </span> </div> </div> </div> </header> <div class='section1'> <img class= 'leftimage' src="Images/frontback.jpg" alt="Missing File"> <div class='HelloIm'>Hello. I'm</div>> <div class='romf'>Rin.</div>> </div> <div class='bio'> <img class = 'rndface' src="Images/rndface:png" alt="Missing File"> <h1 class='topname'> Rkin </h1> <p class='school'> Nechool </p> <p class='interests'> Encience </p> <p class='location'> Chicnois </p> <p class='mail'> fril.com </p> <p class='num'> (8 </p> <p> <a target="_blank" rel="noopener noreferrer" href="https://www.instagkin/" class="fa fa-instagram"></a> <a target="_blank" rel="noopener noreferrer" href="https.//www:linkedin.com/inin-a3a9541a5/" class="fa fa-linkedin"></a> <a target="_blank" rel="noopener noreferrer" href="https://github.in" class="fa fa-github"></a> </p> <p> </div> </body> </html>

Answer 1

I think simple way for page not to be scroll-able when you open navigation is set style overflow of the body tag to hidden , and you close the navigation, just set it back to auto for being scroll-able again我认为打开导航时页面不能滚动的简单方法是将body标签的样式overflow设置为hidden ，然后关闭导航，只需将其设置回auto即可再次滚动

function openNav() {
  document.getElementById("myNav").style.width = "100%";
  document.getElementsByTagName("body")[0].style.overflow = "hidden"; // add here
}

function closeNav() {
  document.getElementById("myNav").style.width = "0%";
  document.getElementsByTagName("body")[0].style.overflow = "auto"; // add here
}

You can take a look here for example.例如，您可以在这里查看。

移动菜单出现时如何消除滚动

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-20 00:23:28

移动菜单出现时如何消除滚动

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-20 00:23:28

解决方案1
0 已采纳 2020-06-20 00:23:28