CODEWITHSUNDEEP
javascripthtmlcss
justanothercoder
justanothercoder

Reputation: 233

Disable scrolling but keep scrollbar CSS

I can't find a solution to this, there was a question over here, but the answers are not very usable (at least for me).

I have a JavaScript modal pop-up that disables everything on the background by placing transparent div over the page. It also disables the scrolling by setting the overflow to hidden, and must do so, because the page is scrollable with the mouse wheel otherwise and distracts the user.

The problem is, when hiding and showing the scrollbar the page resizes and the effect is ugly. Also, my page is designed in such a way that if I stop it from resizing that would be ugly either.

What I want is to disable the scrollbar, but keep it visible (the page content is longer than the screen fits). Is this somehow possible in CSS?

Upvotes: 10

Views: 16387

Answers (3)

mph
mph

Reputation: 868

Since scrollbars are not all 17px wide, I solved this with JavaScript. That is, I calculated the exact width of the scrollbar and added an equal amount of margin to the right of the body element. This also works when the scrollbar isn't present due to a high resolution or a lack of content.

function toggleMenu() {
   // get width before hiding scrollbar
   let oldWidth = document.documentElement.clientWidth;

   // toggle CSS class that sets overflow to hidden
   document.body.classList.toggle('MenuOpen');

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

   // set margin-right value equal to width of the scrollbar
   let scrollbarWidth = Math.max(0, newWidth - oldWidth);
   document.body.style.marginRight = `${scrollbarWidth}px`;
}

...and my CSS looks like:

html {
    background-color: #e6e6e6; /* color of fake scrollbar */
}

body.MenuOpen {
   overflow: hidden;
}

Upvotes: 3

Rob Scott
Rob Scott

Reputation: 8049

Instead of changing the css, which will remove the scrollbar, and as you said change the layout of the page, try calling a jquery function instead.

// call your pop up and inside that function add below
$('body').on('scroll mousewheel touchmove', function(e) {
      e.preventDefault();
      e.stopPropagation();
      return false;
});

then when you close the modal, call the same function but replace on with off

Upvotes: 10

Doml The-Bread
Doml The-Bread

Reputation: 1771

Once you start showing your popup, give the body a class (like popupOpen). This should be an easy workaround. 

.popupOpen {
    overflow: hidden;
    margin-right: 17px //size of the scrollbar in each browser
}

When you close your popup, simply remove the class from the body.

Upvotes: 1

Related Questions