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?
Who is Participating?
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.