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.
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:

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

来源：https://stackoverflow.com/questions/6589909/how-to-make-a-scrollbar-placeholder

标签

jquery

scrollbar

placeholder