javascript - 保持滚动可见但在导航菜单打开时禁用

Question

我有一个导航菜单在工作，但是当它在其余内容的顶部可见时，页面仍然可以滚动。因为按钮被放置在同一个位置，所以如果滚动条被隐藏，页面会跳动太多。当事件类处于事件状态时，我想禁用主体上的滚动条。我曾尝试使用 CSS position: fixed; overflow-y:scroll on body 但这会增加双滚动并且并不总是恢复。

我希望可以修改 JS 以保持滚动条存在但在导航打开时不可滚动我只是不确定如何以可行的方式解决这个问题。

const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');

function onClick(event) {
  siteNav.classList.toggle('active');
}

navButtons.forEach(button => button.addEventListener('click', onClick));

.site-header {
    height: 80px;
    background-color: #FFFFFF;
    display: inline-flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    box-shadow: 0px 0.5px 10px #000000;
}

.site-header-fill {
    height: 80px;
}

.site-logo-container {
    height: 60px;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    float: left;
}

.site-logo {
    height: 60px;
    width: auto;
    float: left;
}

.site-nav-action-container {
    height: 50px;
    width: 50px;
    max-width: 50px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    float: right;
    text-align: right;
}

.site-nav {
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    background: #3399ff;
    z-index: 2;
    display: none;
}

.site-nav.active {
    display: block;
}

.site-nav-content {
    width: 20%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 500px) {
.site-nav-content {
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
}

.site-nav-pages {
    text-align:center;
}

.nav-action {
    height: 50px;
    width: 50px;
}

.pagefill {
  display: block;
  with: 50%;
  height: 2000px;
  background-color: #000000;
  margin: auto;
  margin-top: 100px;
 }

<div class="site-header ">
   <div class="site-logo-container">
      <img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
   </div>
   <div class="site-nav-action-container">
      <button class="nav-action">
         <p>☰</p>
      </button>
   </div>
</div>
<div class="site-nav">
   <div class="site-nav-action-container">
      <button class="nav-action">
         <p>×</p>
      </button>
   </div>
   <div class="site-nav-content">
      <div class="site-nav-pages">
         <p>Page 1</p>
         <p>Page 2</p>
         <p>Page 3</p>
         <p>Page 4</p>
         <p>Page 5</p>
      </div>
   </div>
</div>


   <div class="pagefill"></div>
 

编辑

添加这个似乎可以解决问题，但问题是在导航关闭时删除事件类。 position 和 overflow-y 元素也需要在主体类中，但这很接近。

body.active, html{
    width: 100vw;
    position: fixed !important;
    overflow-y: scroll !important;
}

Answer 1

当 site-nav 有一个类 'active' 时，我将 position of fixed 添加到 body 以避免在 时滚动导航 已启用

const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');

function onClick(event) {
  siteNav.classList.toggle('active');
  if(siteNav.classList.contains('active')){
    document.body.style.position = 'fixed'
  }else{
    document.body.style.position = 'static'
  }
}

navButtons.forEach(button => button.addEventListener('click', onClick));

.site-header {
    height: 80px;
    background-color: #FFFFFF;
    display: inline-flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    box-shadow: 0px 0.5px 10px #000000;
}

.site-header-fill {
    height: 80px;
}

.site-logo-container {
    height: 60px;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    float: left;
}

.site-logo {
    height: 60px;
    width: auto;
    float: left;
}

.site-nav-action-container {
    height: 50px;
    width: 50px;
    max-width: 50px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    float: right;
    text-align: right;
}

.site-nav {
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    background: #3399ff;
    z-index: 2;
    display: none;
}

.site-nav.active {
    display: block;
}

.site-nav-content {
    width: 20%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 500px) {
.site-nav-content {
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
}

.site-nav-pages {
    text-align:center;
}

.nav-action {
    height: 50px;
    width: 50px;
}

.pagefill {
  display: block;
  with: 50%;
  height: 2000px;
  background-color: #000000;
  margin: auto;
  margin-top: 100px;
 }

<div class="site-header ">
   <div class="site-logo-container">
      <img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
   </div>
   <div class="site-nav-action-container">
      <button class="nav-action">
         <p>☰</p>
      </button>
   </div>
</div>
<div class="site-nav">
   <div class="site-nav-action-container">
      <button class="nav-action">
         <p>×</p>
      </button>
   </div>
   <div class="site-nav-content">
      <div class="site-nav-pages">
         <p>Page 1</p>
         <p>Page 2</p>
         <p>Page 3</p>
         <p>Page 4</p>
         <p>Page 5</p>
      </div>
   </div>
</div>


   <div class="pagefill"></div>