Find solution
Why does my web page fade instead of scroll?

How can you stop a centred web page from "jumping" when a scroll bar appears on the page?

  • If I move from content that fits in the browser to one that doesn't the available screen width changes (because the scroll bar appears) and the window shifts slightly.  This is particularly ugly when changing layout dynamically in a single page, but you can also see it when moving between pages on the same site. Is there a way to avoid this that still centres the content on different windows (the content div is fixed width)?

  • Answer:

    You could add overflow-y: scroll; to the html element so you will always have a vertical scroll bar. html { overflow-y: scroll; }

Andrei Bejan at Quora Visit the source

Was this solution helpful to you?

Other answers

There are multiple CSS hacks (like the ones Andrei or Harry have added), that will override the browser default, to make it appear as if the vertical scrollbar has been activated. One I used to use is: body{height:100%;margin-bottom:1px;}. However, I do believe that subverting a browser's functionality in this way can (potentially) be confusing for the user. Whilst it does mean your design won't "jump" 10px on page changes, it will mean that on a browser like Firefox (where the vertical scroll bar is enabled by default), the user may think there's hidden content they need to get to by scrolling. Like I say, I used to implement this very same fix, but then realized some things (like the 10px scrollbar jump) are down to a browser's UI, and the browser user will expect this type of behavior. Changing a user's expectations could be more of a hindrance than help to your design.

Jack Armley

This is better than overflow-y:scroll; as that is not standard/valid CSS I believe this is okay since CSS3: http://www.w3.org/TR/css3-box/#overflow In any case, overflow and height do not do the same thing. The former only creates a gutter, while the latter creates a scrollbar.

Thierry Koblentz

I can answer it from the user's perspective - When the user loads the page for the first time, the text gets rendered instantaneously and he/she starts reading. However, large images and advertisements that are between the text paragraphs gets loaded slowly and thus push the below paragraphs further south. This type of page jumping is bad from user experience as he/she has to relocate the reading point.Now, to stop the page jump or scroll bars free dance, you can use a little flag in Chrome called "Scroll Anchoring".Go to Chrome flags and enable scroll anchoring - the scroll will now always remain stable and prevent page from jumping up and down.Hattip: http://www.gtricks.com/chrome/fix-auto-scroll-position-issue-page-jumps-chrome/

Anonymous

html{ height:101%; } Edit: This is better than overflow-y:scroll; as that is not standard/valid CSS.

Harry Roberts

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.