Menu
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.
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.
649
A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow. The scroll container allows the user to scroll through parts of the overflow region that would otherwise be clipped and hidden from view.
Basic Vertical Scroll Box To make a scroll box with a vertical scroll, you need to use overflow-y:scroll; . This tells your browser to create scroll bars on the y (vertical) axis whenever the contents of the container is too big/high.
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
How about this:
padding-right: scrollbar-width
and after the animation:
I made a demo: http://jsfiddle.net/cwolves/ezLfU/1/
197
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.
21
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
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
