I'm using overflow:hidden to prevent the body from scrolling when an overlay is shown. The problem is this removes the scrollbar so the whole page shifts a bit to the right. It shifts again when the overlay is removes and the overflow is set back to auto.
Is there a way to get around this? I would like to freeze the document from scrolling but would like to prevent the page from jumping around.
You can add this:
html {
overflow-y:scroll;
}
The body element will hide overflow (as you already have it), and the html element will just display an empty scroll bar. This works since you happen to have html and body set at height:100%.
Demo: http://jsfiddle.net/BCX64/3/
Alternatively, you can prevent scrolling like this when you show the overlay:
// Find current scroll positions
var top = $(window).scrollTop();
var left = $(window).scrollLeft()
$(window).scroll(function(){
// Force scroll back to original positions
$(this).scrollTop(top).scrollLeft(left);
});
Then unbind the event when you hide the overlay:
$(window).unbind('scroll');
You don't need the noscroll class in this case.
overflow:hidden on body. I get what you mean though, 1 minute...What if you create a fake scrolling bar and place it in the right side.. you can customize the design too.
