How to maintain html content positions when removing scrollbar?

Question

Sometimes when displaying popups I want to remove scrolling from the body (setting it's overflow to hidden) the problem with this is that depending on the browser and OS it might or might not have a permanent scrollbar (like newest versions of IOS and Ubuntu have a scrollbar that toggles on hover).

So when I do:

$('body').css('overflow','hidden');

The content may move X px to the right, since the scrollbar was taking space from the viewport. To fix this I thought about doing this:

    var width = $(window).width();
    $('body').css('overflow','hidden');
    var margin = $(window).width() - width;
    $('html').css('margin-right',margin);

Which seems to work fine as it adds a white bar at the right of the same width of the scrollbar, however this doesn't work if there are fixed elements on the page (which will move right when the scrollbar is removed).

How can I maintain all the contents position, while removing the scrollbar?

dont remove the scroll. keep the scroll `overflow-y:scroll`. — Rafael Herscovici, Sep 26 '13 at 18:10
was that sarcasm? srsly? if you add what i have given to your code, the overflow will be still hidden, but the scroll bar will still be there, which will achieve what you wish for, no movement... — Rafael Herscovici, Sep 26 '13 at 18:14
@Dementic the OP specifically asks, "while removing the scrollbar", your comment is the opposite of that. — Fresheyeball, Sep 26 '13 at 18:16
@Fresheyeball - the OP is trying to avoid the movement, if he dosent know it is possible without removing the scroll, one should let him know. — Rafael Herscovici, Sep 26 '13 at 18:17
@Dementic do you mean 'im'possible? Because it is possible, and he does know that its possible. — Fresheyeball, Sep 26 '13 at 18:18
so what happens if you run in an O/S that puts scrollbars on the left hand side? — Alnitak, Sep 26 '13 at 18:25
sorry, I thought you were pulling my leg. I understand your proposition however it wouldn't work, the reason while the scrollbar is disabled in your fiddle is that you set the height to 200px, in reality browsers have different screen sizes, so doing something like this would mean that half the users would see half the content and the other half would have the scrollbar still enabled — lisovaccaro, Sep 26 '13 at 18:25
@Alnitak good point, I think it could be solved checking the left and right position of certain elements. Eg: if an element is in the middle of the screen (left 50%) I get the left position in pixels, when removing the scrollbar it should decrease or increase towards the place the sidebar was... I think — lisovaccaro, Sep 26 '13 at 18:31
@Liso22 take a look at http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily — Alnitak, Sep 26 '13 at 18:47
I just tried it, the problem is that the bar is still usable (it only prevents scrolling with the mousewheel and keyboard arrows) — lisovaccaro, Sep 26 '13 at 19:20

score 0 · Answer 1 · answered Sep 26 '13 at 18:13

0

I think your solution is fine. You just need to do some css to make the white scroll bar placeholder less noticeable.

Alternatives include:

using padding to fill out the difference instead of margin
absolutely positioning your content and using the left property to lock it to the left side of the window (no scrollbar)

You can also measure the width of the os scroll bar with javascript ahead of time, this way you have a number to work with in making your stylistic adjustments, see this.

answered Sep 26 '13 at 18:13

Fresheyeball

29,567
20
102
164

@Dementic what about it? – Fresheyeball Sep 26 '13 at 18:24
that is where your avatar is from, was thinking you'd enjoy other work of arts by the same artist. – Rafael Herscovici Sep 26 '13 at 18:26
Well yes, but if you want to talk art, you should contact me outside of SO – Fresheyeball Sep 26 '13 at 19:16

score 0 · Accepted Answer · answered Oct 14 '15 at 19:45

I know this is old question, but your script helped me to deal with fixed divs. In my situation, i had 100% width fixed header. Everything worked fine, just after initiating your script, some elements in fixed div still changed position. So, in your script i included this:

$('.header').css({ 'width': 'calc(100% - ' + margin+ 'px)' });

and after closing your script:

$('.header').css('width','100%');

As i said before, in my situation this worked fine.

Full script looks like this:

On click:

var width = $(window).width();
$('html').css('overflow','hidden');

var margin = $(window).width() - width;
$('html').css('margin-right',margin);

$('.header').css({ 'width': 'calc(100% - ' + margin+ 'px)' });

After close:

var width = $(window).width();
$('html').css('overflow','visible');

var margin = $(window).width() - width;
$('html').css('margin-right',margin);

$('.header').css('width','100%');

Sorry for bad english. I hope this answer will help someone.

How to maintain html content positions when removing scrollbar?

2 Answers2