Question

我找到了一些关于如何调用叠加菜单以及隐藏滚动条的方法的公开讨论，但我仍然没有足够的声誉点来使用简单的评论并避免使用问题。

如果覆盖页面是＆＃34;打开＆＃34;，主滚动条（并锁定正文滚动）并在覆盖页面关闭时重新启用它，我该如何隐藏？

＆＃13;

 body {
          background-color: rgb(13, 199, 165);
          height: 2000px;
          overflow-y: scroll;
        }
    
        .click {
          position: fixed;
          width: 100px;
          height: 20px;
          bottom: 50px;
          left: 50px;
    
          color: rgb(255, 255, 255);
          font-family: Menlo;
          font-size: 15px;
          text-align: left;
        }
    
        .click:hover {
          color: rgb(242, 40, 27);
          cursor: pointer;
        }
    
        label {
          cursor: pointer;
        }
    
        input {
          display: none;
        }
    
        .overlay {
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgb(242, 40, 27);
    
          -webkit-clip-path: inset(0% 0% 100% 0%);
          clip-path: inset(0% 0% 100% 0%);
          -webkit-transition: 1s cubic-bezier(1, 0, 0, 1);
          transition: 1s cubic-bezier(1, 0, 0, 1);
        }
    
        .overlay nav {
          position: relative;
          display: block;
          height: 100vh;
          overflow: auto;
          text-align: center;
        }
    
        .overlay ul {
          position: relative;
          display: inline-block;
          height: 50%;
          margin: 24vh auto;
          padding: 0;
    
          list-style: none;
        }
    
        .overlay ul li {
          display: block;
          height: 20%;
          min-height: 50px;
        }
    
        .overlay ul li a {
          position: relative;
          display: block;
          top: 50%;
          transform: translateY(-50%);
          color: rgb(255, 255, 255);
          text-decoration: none;
          font-family: Menlo;
          font-size: 54px;
        }
    
        .overlay ul li a:hover,
        .overlay ul li a:focus {
          color: rgb(13, 199, 165);
        }
    
        #open:checked~.overlay {
          -webkit-clip-path: inset(0% 0% 0% 0%);
          clip-path: inset(0% 0% 0% 0%);
        }
    
        .overlay nav ul {
          -webkit-transform: translateY(-400%);
          transform: translateY(-400%);
          -webkit-transition: 1s cubic-bezier(1, 0, 0, 1);
          transition: 1s cubic-bezier(1, 0, 0, 1);
        }
    
        #open:checked~.overlay nav ul {
          -webkit-transform: translateY(0%);
          transform: translateY(0%);
        }

＆＃13;

<input type="checkbox" id="open">
    
      <div class="click">
        <label for="open">Click here!</label>
      </div>
    
      <div class="overlay">
        <label for="open">
          <nav>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </label>
      </div>

＆＃13;

Answer 1

没有JavaScript且结构不同

<label for="open">Click me</label>
<input type="checkbox" id="open">
<div class="menu">...</div>

<强>提示

隐藏<input type="checkbox">。
为适合两种背景颜色的标签选择悬停颜色。
使用top: -100vh隐藏菜单，并将其显示为top: 0。
将vh用于font-size。

实施例

＆＃13;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: rgb(13, 199, 165);
}

.menu {
  position: relative;
  top: -100vh;
  height: 100vh;
  width: 100vw;
  background: red;
  text-align: center;
  transition: 1s cubic-bezier(1, 0, 0, 1);
}

.menu ul {
  position: absolute;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 50vh;
  transform: translateY(-50%);
}

.menu a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-family: Menlo;
  font-size: 10vh;
}

.menu a:hover,
.menu a:focus {
  color: rgb(13, 199, 165);
}

.hide {
  display: none;
}

.open {
  position: absolute;
  z-index: 1000;
  bottom: 7vh;
  left: 50px;
  color: rgb(255, 255, 255);
  font-family: Menlo;
}

.open:hover {
  color: orange;
  cursor: pointer;
}

#open:checked+.menu {
  top: 0;
}

＆＃13;

<label for="open" class="open">Click here!</label>
<input type="checkbox" id="open" class="hide">
<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

＆＃13;

Answer 2

我问的问题的解决方案比我想象的要简单，但正如我所预料的那样，我对JavaScript的了解目前非常有限。

然而学习了一点'我自己找到了解决方案，所以无论多么微不足道，我都会附上它来帮助那些正在接近JavaScript的人。此添加基于用户@sun提出的更正。

谢谢你们。

  <label for="open" class="open" onclick=“a()”>Enter!</label>
  <input type="checkbox" id="open" class="hide">
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <label for="open" class="close” onclick=“b()”>Exit!</label>
  </div>
  <script type="text/javascript">
    function a() {
      document.body.style.overflowY = "hidden";
    }
    function b() {
      document.body.style.overflowY = "auto";
    }
  </script>

当叠加菜单打开时隐藏主滚动条

2 个答案:

实施例