How to make a scrollbar placeholder
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:
www.nebulafilm.dk/index.html?content
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.
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.
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.
<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 = 开发者_C百科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:
- Determine the width of the scrollbar in the current browser
- Set a content div to
padding-right: scrollbar-width - Hide scroll on parent
and after the animation:
- Remove padding-right on content
- show scroll on parent
I made a demo: http://jsfiddle.net/cwolves/ezLfU/1/
I just looked at your site and thought of an alternative approach. If you're hiding the scrollbar with overflow:hidden, you could also reimplement scrolling as well.
Attach events to page up/page down/home/end/arrow up/arrow down, mouse wheel up/mouse wheel down, and then do
$(window).scrollTop($(window).scrollTop() + 15)
The code above is obviously bad and just an example, but possibly something you may like to try.
How about making your content a few pixels less wide than the container and toggling the overflow-y attribute?
Scrollbars can have different widths on different browsers/OSes. If you are not going to calculate the width of the scrollbar you best take it wide enough so it works on all browsers.
Example
You can use http://jscrollpane.kelvinluck.com/ to give you some control over the scrollbar and work from that.
Displaying a disabled scrollbar is as simple as setting overflow:scroll;
Vertical only would be overflow-y:scroll
加载中,请稍侯......
精彩评论