title: Keep scroll visible but disable when nav menu open
body: <p>I have a nav menu working but the page is still scrollable when that becomes visible over the top of the rest of the content. Because the button is positioned so it's in the same place the page would jump about too much if the scroll bar was hidden. I want to disable the scrollbar on the body when the active class is active. I had tried using CSS <code>position: fixed; overflow-y:scroll</code> on body but this adds double scrolling and doesn't always revert.</p>
  <p>I'm hoping the JS can be modified to keep the scrollbar present but not scrollable while the nav is open I'm just not sure how to approach this in a workable way.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const navButtons = document.querySelectorAll('button.nav-action');
  const siteNav = document.querySelector('.site-nav');
  
  function onClick(event) {
    siteNav.classList.toggle('active');
  }
  
  navButtons.forEach(button =&gt; button.addEventListener('click', onClick));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="site-header "&gt;
     &lt;div class="site-logo-container"&gt;
        &lt;img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo"&gt;
     &lt;/div&gt;
     &lt;div class="site-nav-action-container"&gt;
        &lt;button class="nav-action"&gt;
           &lt;p&gt;☰&lt;/p&gt;
        &lt;/button&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="site-nav"&gt;
     &lt;div class="site-nav-action-container"&gt;
        &lt;button class="nav-action"&gt;
           &lt;p&gt;×&lt;/p&gt;
        &lt;/button&gt;
     &lt;/div&gt;
     &lt;div class="site-nav-content"&gt;
        &lt;div class="site-nav-pages"&gt;
           &lt;p&gt;Page 1&lt;/p&gt;
           &lt;p&gt;Page 2&lt;/p&gt;
           &lt;p&gt;Page 3&lt;/p&gt;
           &lt;p&gt;Page 4&lt;/p&gt;
           &lt;p&gt;Page 5&lt;/p&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  
     &lt;div class="pagefill"&gt;&lt;/div&gt;
   </code></pre>
  </div>
  </div>
  </p>
  <p><code>EDIT</code></p>
  <p>Adding this seems to do the trick but the issue is removing the active class when the nav is closed. The position and overflow-y elements also need to be in the main body class too but this is close.</p>
  <pre><code>body.active, html{
      width: 100vw;
      position: fixed !important;
      overflow-y: scroll !important;
  }
  </code></pre>