CSS adds vertical scroll bar (stops redraw jumping on auto center)

Discussion in 'Templates customization' started by karyng01, Apr 9, 2012.

  1. karyng01

    karyng01 aMember Pro Customer

    Joined:
    Jul 30, 2008
    Messages:
    71
    To force a scroll bar and fix the aMember site from visually jumping (left to right on recentering) add the following CSS:

    html {
    overflow-y: scroll;
    }

    Add the CSS to your site.css or theme.css file to stop the aMember site from visually jumping (left to right) as you navigate from page to page and the page recenters itself. This is a problem on all sites that use auto centering if the height of the rendered page is less than the height of the browser window. Switching between pages that are too short (for the height of the browser window) to longer pages (taller than the height of the browser window) makes the website visually jump for a second as it recenters itself. Its plain distracting to look at as an end user.

    The cause is too short page doesn't automatically have a vertical scroll bar drawn, where as a too tall page does have a vertical scroll bar drawn drawn by the web browser. The suggested code mades all pages have a vertical scoll bar, whether they need one or not, so removing the visual auto centering distraction.

    Having a grayed out scrollbar causes no problems.

    Aly

Share This Page