•  05-07-2019
  •  | 
  •  

Question

When you go to page on my website where there is extra content, the scrollbar appears on the right, but it has a notiable shift to the left for my content. You notice this by clicking home and then hosting and back again on my site (www.ipalaces.org)

How can I account for the browser scrollbar on my pages? Can I make it so the scrollbar is always visible atleast?

My website is www.ipalaces.org, please let me know.

Was it helpful?

Solution

Make your body 101% tall... this will force the scrollbar to always show up.

body {height:101%}

OTHER TIPS

Well, it depends on the browser.

body {

overflow-y: scroll;
overflow-x: scroll;
overflow: -moz-scrollbars-vertical;

}

Should force the horizontal (overflow-x) and vertical scrollbars (overflow-y) to be displayed. Though I recall that Opera sometimes fails to respect the declaration, unless it's on an element within the <body> (divs and the like).

Edited with regard to @wsanville's, and @BHare's, comment.

I've tested this on IE6, IE7, IE8, Firefox 3, and Chrome, and the simple way to have a vertical scroll bar always visible is simply:

html { overflow-y: scroll; } 

body {
   overflow: scroll;
}

I had the same problem with even the newest Firefox (3.5). The overflow function saved my life!

This seems to work great for me...

html {
    overflow-y: scroll;
}

Give this a try... I know its ugly but it may be the only way.

#force_scroll { 
    width: 1em; 
    position: absolute; 
    top: 0; 
    bottom: -0.1px; 
    z-index: -1; 
}

And then in your HTML somewhere (preferably right before your </body>):

<div id="force_scroll"></div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top