Maintain visibility of the scroll bar but deactivate it when the navigation menu is open

Question

Maintain visibility of the scroll bar but deactivate it when the navigation menu is open

My navigation menu is functioning properly, but the page remains scrollable when it appears over the content. The button's position causes too much jumping if the scrollbar is hidden. I want to disable scrolling on the body when the active class is present. I attempted using CSS properties

position: fixed; overflow-y:scroll

on the body, but this results in double scrolling and does not always revert.

I am hoping that JavaScript can be adjusted to keep the scrollbar visible but non-scrollable while the navigation menu is open. I am uncertain about how to approach this effectively.

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>

EDIT

Adding this code seems to solve the problem, but the challenge lies in removing the active class when the navigation is closed. Additionally, the position and overflow-y elements should also be included in the main body class. This solution is promising, but needs refinement.

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

javascript html css

Answer 1

Answer №1

When the class site-nav is set to 'active', I have included the fixed position for the body element to prevent scrolling when the navigation menu (nav) is activated.

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

function handleButtonClick(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', handleButtonClick));

.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;
}
/* more CSS code goes here */

<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">
<!-- HTML markup for site navigation -->

Answer 2

When the class site-nav is set to 'active', I have included the fixed position for the body element to prevent scrolling when the navigation menu (nav) is activated.

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

function handleButtonClick(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', handleButtonClick));

.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;
}
/* more CSS code goes here */

<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">
<!-- HTML markup for site navigation -->

Answer 3

Answer №2

Alright, here's the solution to your issue. I managed to tackle the problem by utilizing the window.scroll() method along with the onscroll event listener on the window object. Essentially, I'm checking if the siteNav element has an active class, and if it does, I'm adding an event listener to the window. This listener ensures that whenever the window is scrolled, the scroll position remains at the top using window.scroll(0,0).

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

function disableScroll() {
  window.scroll(0,0);
}

function onClick(event) {
  siteNav.classList.toggle('active');
  
  if (siteNav.classList.contains('active')) {
    document.body.classList.add('active');
    window.addEventListener('scroll', disableScroll);
  } else {
    document.body.classList.remove('active');
    window.removeEventListener('scroll', disableScroll);
  }
}

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

   
  /* Your CSS styles go here */

<div>
   <p>Your HTML code goes here</p>
</div>

Answer 4

Alright, here's the solution to your issue. I managed to tackle the problem by utilizing the window.scroll() method along with the onscroll event listener on the window object. Essentially, I'm checking if the siteNav element has an active class, and if it does, I'm adding an event listener to the window. This listener ensures that whenever the window is scrolled, the scroll position remains at the top using window.scroll(0,0).

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

function disableScroll() {
  window.scroll(0,0);
}

function onClick(event) {
  siteNav.classList.toggle('active');
  
  if (siteNav.classList.contains('active')) {
    document.body.classList.add('active');
    window.addEventListener('scroll', disableScroll);
  } else {
    document.body.classList.remove('active');
    window.removeEventListener('scroll', disableScroll);
  }
}

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

   
  /* Your CSS styles go here */

<div>
   <p>Your HTML code goes here</p>
</div>

Answer 5

Answer №3

Here is a potential solution for you:

Check out this CodePen

I made some modifications to the JavaScript code as follows:

   var pf = document.body.querySelector('.pagefill'); // added
   function onClick(event) {
   siteNav.classList.toggle('active');
   siteNav.style.overflowY = "scroll"; // added
   pf.classList.toggle('pf-height'); // added
 }

Additionally, I introduced a new CSS class for the div with the .pagefill class:

  .pf-height {
      height: 0;
  }

With these adjustments, when you open the navigation menu, it will display a scrollbar without enabling scrolling functionality.

Answer 6

Here is a potential solution for you:

Check out this CodePen

I made some modifications to the JavaScript code as follows:

   var pf = document.body.querySelector('.pagefill'); // added
   function onClick(event) {
   siteNav.classList.toggle('active');
   siteNav.style.overflowY = "scroll"; // added
   pf.classList.toggle('pf-height'); // added
 }

Additionally, I introduced a new CSS class for the div with the .pagefill class:

  .pf-height {
      height: 0;
  }

With these adjustments, when you open the navigation menu, it will display a scrollbar without enabling scrolling functionality.

Answer 7

Answer №4

This piece of JavaScript code effectively prevents the page width from shifting when the scrollbar is hidden, ensuring a smooth browsing experience across different browsers with varying scrollbar widths.

function toggleMenu() {
   // save current window width
   let oldWidth = document.documentElement.clientWidth;

   // toggle CSS class to hide scrollbar
   document.body.classList.toggle('MenuOpen');

   // get new window width after hiding scrollbar
   let newWidth = document.documentElement.clientWidth;

   // calculate scrollbar width difference
   let scrollbarWidth = Math.max(0, newWidth - oldWidth);
   document.body.style.marginRight = `${scrollbarWidth}px`;
}

To complement the JavaScript, here's some CSS:

html {
    background-color: #e6e6e6; /* customized color for faux scrollbar */
}

body.MenuOpen {
   overflow: hidden;
}

Answer 8

This piece of JavaScript code effectively prevents the page width from shifting when the scrollbar is hidden, ensuring a smooth browsing experience across different browsers with varying scrollbar widths.

function toggleMenu() {
   // save current window width
   let oldWidth = document.documentElement.clientWidth;

   // toggle CSS class to hide scrollbar
   document.body.classList.toggle('MenuOpen');

   // get new window width after hiding scrollbar
   let newWidth = document.documentElement.clientWidth;

   // calculate scrollbar width difference
   let scrollbarWidth = Math.max(0, newWidth - oldWidth);
   document.body.style.marginRight = `${scrollbarWidth}px`;
}

To complement the JavaScript, here's some CSS:

html {
    background-color: #e6e6e6; /* customized color for faux scrollbar */
}

body.MenuOpen {
   overflow: hidden;
}

Answer 9

Answer №5

If you want to prevent scrolling on the page, simply modify the overflow property to hidden like so:

html{
    overflow: hidden; // stops scrolling
}

Answer 10

If you want to prevent scrolling on the page, simply modify the overflow property to hidden like so:

html{
    overflow: hidden; // stops scrolling
}

Maintain visibility of the scroll bar but deactivate it when the navigation menu is open

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

I'm having trouble getting my object to display using ng-repeat in Angular. Can anyone help me understand what I'm missing?

Transforming a two-column text document into a set of key-value pairs

Include a suffix after the user's input in a Material UI TextField

What could be causing this Cloud Function to be triggered multiple times by an Android HTTP request?

If the user inputs any text, Jquery will respond accordingly; otherwise,

Maximizing engagement with Mapbox markers

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

The JS variable text consistently displays as undefined

Creating a JavaScript function to display an object on top of a background image

Sending an image dynamically as a prop to a child component

Tips for transferring data to a different webpage while ensuring that dynamic elements remain active

Tips on dividing and recycling mongodb connection in Node.js

Check to see if the ContentEditable div is currently focused

The "truth" parameter within the xmlHttpRequest .open() function

A pair of areas within the content that can be scrolled using both the vertical and horizontal scrollbars of the browser

Top tips for utilizing numerous XMLHttpRequests efficiently

Building a Form Component within a Table Using ReactJS

Instructions for transferring an object from a list box with Selenium WebDriver

Is there a way for me to have Next.Js automatically download and serve all the external assets on my website?

Animating the height of a div using nested div elements