javascript - 当覆盖菜单打开时隐藏主滚动条

Question

我发现了一些关于如何调用覆盖菜单和隐藏滚动条的方法的公开讨论，但我仍然没有足够的信誉点数来使用简单的评论并避免使用问题。

如何在覆盖页面“打开”时隐藏主滚动条(并锁定主体的滚动条)并在覆盖页面关闭时重新启用它？

 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%);
        }

<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>

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字体大小。

例子

* {
  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;
}

<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>