My problem is that the browser windows vertical scrollbar that is removed by for example overflow:hidden; will make the page jump, when it reappears later. I use jQuery to remove the scroll option from the visitor, while a script is running and scrolling the page to a specific point, and then to make it reappear again afterwards.
Can I make a placeholder for the scrollbar, when it is not present, so it won’t jump back?
Or is it possible to "disable" it and have it "greyed out"?
I cannot find any solutions by searching. I have found something similar here: stackoverflow.com where the scrollbar is always there. But the difference is that the scrollbar must remain disabled, even if the page is longer than the window. It must only be "turned on" again through another script that I control.
Is this in any way possible?
Thanks.
Update:
Time for a status update.
I had some problems with the star cloud background image, which was set on the body tag.
When the jQuery script (from cwolves answer) added the padding to the html tag and therefore should push all elements on the page to the left, the background image still didn’t behave right.
Well, I found out that the body element doesn’t react like any div element. It is not just a "block" inside the html tag like any other block element. It has its own behaviors and apparently can’t be tricked with in the same way. Therefore the background image was impossible to touch, while it was on body.
But it took me some time to realize…
The end solution to this is so flipping stupidly simple that I was almost in tears when finding out, thinking of the endless (I might exaggerate a little) hours of investigating the body.
I simply wrapped everything in a <div id="body"> and gave this the background image instead. Suddenly everything fell into place.
From:
<body>
...
</body>
And
body {background-image: url(...);}
To:
<body>
<div id="body">
...
</div>
</body>
And:
#body {background-image: url(...);}
And a little bit wiser about the body.
No "jumping" anymore. Delicious.
The effect is now fully running and you almost doesn’t notice a change with the scroll bar and every detail fits. Cwolve’s script is perfect and does the exact calculation:
function getScrollBarWidth(){
var div = $('<div><div>' + new Array(100).join('content<br />') + '</div></div>'),
div2 = div.find('div'),
body = $(document.body);
div.css({ overflow : 'hidden', width: 100, height: 100, position : 'absolute', left : -1000, top : -1000 });
body.append(div);
var width1 = div2.width();
div.css({ overflow : 'auto' });
var width2 = div2.width();
div.remove();
return width1 - width2;
}
The getScrollBarWidth() will contain exactly the width of the scroll bar no matter the browser, and I can use it to add and remove paddings as I want to:
var sWidth = getScrollBarWidth();
$("body").css({'overflow': 'hidden'});
$("html").css({'padding-right': sWidth});
$('html, body').delay(1000).animate({
scrollTop: $(hash).offset().top - 170
}, 2000, 'swing', function(){
$("body").css({'overflow': 'auto'});
$("html").css({'padding-right': 0});
});
Thanks very much. This was a nice one.
How about this:
padding-right: scrollbar-widthand after the animation:
I made a demo: http://jsfiddle.net/cwolves/ezLfU/1/