how to have floating scroll bar

Posted on 2006-04-24
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

    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

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    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.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    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…

    754 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

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now