how to have floating scroll bar

The title may be a little ambigious. What I need is to have a scroll bar such that its presence does not affect the page it is in by shifting all the contents of the page by width equal to scroll bar's width.

I've set scrolling = "auto" cause thats how I want.

Next, if the page is small enough to fit on screen, then I don't have a problem.

However, if the page is longer than screen size, then the scroll bar appears on the right hand side and shifts all of the page data slightly to the left.

how do i avoid this problem?
kavishshuklaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ljo8877Commented:
Not really. IE will leave space for the scroll bar (that can cause otherwise unexplained spaces at the right edge of the window), but other browsers flow into that space. You could use some JavaScript to reposition things, but there would still be a movement visible to the user.

If you use a fixed width lay-out style, you could make the layout smaller than the window width. For example, if the window is 620px width (window.innerWidth in Mozilla) and your content is restricted to 580px (i.e. it is in a div with a width specified) then
giving it (the div with the content) a left margin of 20px and a right margin of 0 will center it and leave 20px for the scroll bar; thus avoiding the shift. But your design must be able to use a fixed width that is small enough.

If you want to adjust the width for window size, you can use the window.innerWidth minus 20px for the scroll bar and 20px on teh left to give a centered appearance (a total of 40px) to determine the space available. Then using document.styleSheets and  document.styleSheets[i].cssRules or document.styleSheets[i].rules, depending of the browser, find the CSS style selector for the content div and set the CSS left margin and width. The script can run after the CSS in the html and before the body changing the CSS before the content is displayed. However, this won't work with CSS that is included with @import.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.