Disable scrolling but keep scrollbar CSS

Question

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?

For what exactly? I mean really, for which part? The entire code is fairly complicated, with JS dynamically adding elements. — justanothercoder, Mar 27 '15 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 loves trees, Mar 27 '15 at 11:20
Possible duplicate of [Just disable scroll not hide it?](https://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it) — Jordan Running, Sep 08 '17 at 15:20

score 9 · Accepted Answer · answered Mar 27 '15 at 11:22

9

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

answered Mar 27 '15 at 11:22

Rob Scott

7,306
4
34
57

2

Yeah, again no simple CSS solution when there should be, and there is not a reason why. Thank you, will use JS/jQuery – justanothercoder Mar 27 '15 at 11:34
3

Good idea, but it also blocks any scroll inside the popup. – OZ_ May 26 '16 at 19:53
4

Btw, users can still scroll the content by dragging the scrollbar with mouse after that. – Evi Song Jun 01 '16 at 09:43

score 2 · Answer 2 · answered Mar 27 '15 at 11:21

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.

answered Mar 27 '15 at 11:21

Doml The-Bread

1,707
1
9
16

Nice to know that about the scrollbar, but I can't do that. If the page is wiewed in higher resolution there won't be scrollbar, so this will screw it. Also, my page, well, I recreate something very similar to this free template: http://www.wix.com/website-template/view/html/1410?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fbusiness-services%2F6&bookName=create-master-new&galleryDocIndex=2&category=business-services&metaSiteId=&viewMode=desktop Simply resizing or leaving more margin is very much visible, my margins are exen less than on this template... – justanothercoder Mar 27 '15 at 11:26
1

are all `scrollbars` the same width on all browsers on all devices? – Rob Scott Mar 27 '15 at 11:27
17

The scrollbar width isn't the same on all browsers. – web-tiki Mar 27 '15 at 11:27
according to this, they are: http://www.textfixer.com/tutorials/browser-scrollbar-width.php – Doml The-Bread Mar 27 '15 at 11:27
1

and if not you could use `.css()` and this script: http://stackoverflow.com/questions/8079187/how-to-calculate-the-width-of-the-scroll-bar – Doml The-Bread Mar 27 '15 at 11:29
can the user change the width of their scrollbar? http://answers.microsoft.com/en-us/windows/forum/windows_7-desktop/how-to-adjust-the-width-of-the-scrollbar-in/b45bf22b-4882-45e1-9b3c-5051da0dc631 – Rob Scott Mar 27 '15 at 11:29
@DomlThe-Bread that source is wrong according to [my tests](http://stackoverflow.com/questions/23180488/media-queries-and-scrollbar-width) – web-tiki Mar 27 '15 at 11:29
good test ! (y) yeah as i mentioned above, you could calculate the width of the scrollbar and add inline css with jquery! – Doml The-Bread Mar 27 '15 at 11:30

Disable scrolling but keep scrollbar CSS

2 Answers2

Linked

Related