My problem is that the vertical scrollbar of the browser windows, which is removed, for example, overflow:hidden; will make the page go when it appears later. I use jQuery to remove the scroll option from the visitor, and the script runs and scrolls the page to a certain point, and then reappears again:
www.nebulafilm.dk/index.html?content
Can I make a placeholder for the scrollbar when it's not there, so it won't come back?
Or can you turn it off and gray?
I can not find any solutions by searching. I have found something similar here: https://stackoverflow.com/a/166267/ where there is always a scroll bar. But the difference is that the scrollbar should remain off, even if the page is longer than the window. It should only be "turned on" again through another script that I control.
Is it possible?
Thanks.
Update:
Status update time.
I had some problems with the background image of a star cloud that was set on the body tag.
When the jQuery script (from cwolves answers) adds an addition to the html tag and therefore needs to click all the elements on the page to the left, the background image still does not behave correctly.
Well, I found out that the body element does not react like any div element. It is not just a “block” inside an html tag, like any other element of a block. This has its own behavior and, apparently, cannot be deceived in the same way. Therefore, the background image was impossible to touch while it was on the body .
But it took me a while to figure out ...
The final solution to this problem is so stupid that I almost cry when I find out, thinking about the endless (I could exaggerate a bit) hours of body research.
I just wrapped everything in <div id="body"> and gave a 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 wiser about the body .
No "jump" anymore. Delicious.
The effect is now fully launched, and you hardly notice the changes with the scroll bar, and every detail fits. Cwolve script is perfect and makes an accurate 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; }
getScrollBarWidth() will contain exactly the width of the scroll bar regardless of the browser, and I can use it to add and remove paddings as I want:
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}); });
Many thanks. It was a pleasure.