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

Solution 1:

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

Solution 2:

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.