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?

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?

• javascript
• html
• css

• 1 please show some code – Fabrizio Calderan Commented Mar 27, 2015 at 11:14
• For what exactly? I mean really, for which part? The entire code is fairly complicated, with JS dynamically adding elements. – justanothercoder Commented Mar 27, 2015 at 11:16
• I have no idea of how this page works and how you made it. How can you expect I understand which or where is the problem and if it's possible to fix it in CSS? – Fabrizio Calderan Commented Mar 27, 2015 at 11:20
• Possible duplicate of Just disable scroll not hide it? – Jordan Running Commented Sep 8, 2017 at 15:20

3 Answers 3

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

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

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.