Deactivate body's scrolling but keep scroll bar

Question

How do I disable body's scroll bar, but let it stay visible on screen? As an example see facebook's theatre mode:

facebook screen

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:19

score 17 · Accepted Answer · edited Jul 05 '12 at 04:50

17

This is the only CSS you will ned to force the scrollbars:

html{
    overflow-y: scroll;
}

The scrollbars will be disabled if the content is smaller than the window, so you will have to use some script to resize the body to be at least 1px less then the window height:

$("body").css({ "height" : ($(window).height() - 1) + 'px', "overflow": "hidden" });

edited Jul 05 '12 at 04:50

lucas clemente

6,255
8
41
61

answered Jul 04 '12 at 23:50

Ricardo Souza

16,030
6
37
69

This does the job really well. However instead of using JS for defining body height, I find it cleaner to go with css. With little playing around, I found two options: Apply position:fixed; to html tag, along with overflow-y:scroll; Or, if you are using a framework which already adds overflow:hidden, to your body tag (I assume most people who searched this issue, have it because overflow: hidden; on body), you could just define body height with 100vh. Don't forget to remove those styles when modal is closed. – mzrnsh Feb 23 '16 at 02:45
Good catch. You shoul add your own answer, so I can upvote it. – Ricardo Souza Feb 23 '16 at 23:48
Thanks but I am not done with my solution yet :) I am trying to apply this to a very long page so most of the times users will first scroll then open modal and all my options cause either scrollbar to be still active, or scroll the user to top and then deactivate scrollbar. I checked what facebook does and they use position fixed plus adding top: xxxxx pixels (based on how far you have scrolled already) on content wrapper (not body in their case). When I am done I may add that as an answer – mzrnsh Feb 24 '16 at 01:35

score -5 · Answer 2 · answered Jul 04 '12 at 23:32

-5

overflow-y: scroll;

That should be what you're looking for.

answered Jul 04 '12 at 23:32

Chad

5,308
4
24
36

it won't **disable** the scrollbar – Zoltan Toth Jul 04 '12 at 23:35
That just shows the scroll bar always, but doesn't disable scrolling, does it? – lucas clemente Jul 04 '12 at 23:35
Oh, I thought you just wanted to leave the scrollbar there even if there wasn't enough content on the page. How do you want to scroll if the content is bigger than the browser screen? – Chad Jul 04 '12 at 23:43
The disabled scrollbar is only a side effect of the content being smaller than the window. – Ricardo Souza Jul 04 '12 at 23:46
@rcdmk: How does facebook do this then? The rest of the page is still visible from underneath the dark overlay. – lucas clemente Jul 04 '12 at 23:49
answer here: http://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it – Pierre Sep 03 '12 at 13:07

Deactivate body's scrolling but keep scroll bar

2 Answers2

Linked