[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


how to have floating scroll bar

Posted on 2006-04-24
Medium Priority
Last Modified: 2012-06-21
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?
Question by:kavishshukla
1 Comment
LVL 10

Accepted Solution

ljo8877 earned 1000 total points
ID: 16537994
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.

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question