Forcing the right scrollbar to appear on your web page

Posted on Fri Mar 10 16:34:00 UTC 2006

One common problem when using a centered layout is that when a page is short, the browser does not display a scrollbar, and when your page is taller than a screen, the browser adds a scrollbar. That’s all nice except that your painfully designed content jumps around to accomodate the scrollbar. The solution I have used is to force the scrollbar to appear all the time.

By no mean am I taking credit for this trick. I’ve modified Richard White’s template to incorporate it.

Just include this in your CSS, and voila!

/* force right scrollbar */
html { 
    height: 100%;
    margin-bottom: 1px;
}

this will force a vertical scrollbar to appear on the right side.

Posted in html/css | Tags html | 24 comments

Comments

Leave a response

jeremy said // Mar 12, 2006 at 09:18 AM

I just tried your little scrollbar hint, and it worked... BUT it looks stupid. At least to me. I'm as tormented as the next guy about layout "hopping" but having an ever present scroll bar on the right on "short" pages that only scrolls a single pixel seems wrong to me... The cure is worse than the disease.
Pascal said // Mar 12, 2006 at 10:11 AM

Jeremy, Thank you for the honest feedback. I'm truly sorry you don't like the result. This is the best technique I've found so far and if you know of a better, one please do let us know and I'll update the page. FWIW, the other techniques I've seen used are adding an arbitrary <div> or 1000px or equivalent. I've also seen techniques where you can force the scrollbar with some javascript, but I think I had trouble with cross browser compatibility. And the simplest of all is to always put enough content on the page to guarantee that the page needs to scroll ;) In the end it is a matter of what looks right to you. That said, once the page has a reasonable amount of content (say at least 25% of the page), and you are not totally focused on the scrollbar, at least to me, it really disappears and you are not startled by the layout hopping.
Luis said // Feb 28, 2007 at 03:41 AM

Wouldn't this work just as easily? body { overflow-y : scroll; } Works if you apply it to html, also. Basically body tag or it's parent. -Lu (digitalbonsai [dot] com)
Pascal said // Feb 28, 2007 at 04:21 AM

Interesting idea. This may work just as well. Did you try it with usual browsers?
TM4B SMS Gateway said // Apr 02, 2007 at 06:24 PM

Any feedback with regards to "body { overflow-y : scroll; }"? Alternatively, what is the js solution?
TM4B SMS Gateway said // Apr 02, 2007 at 07:51 PM

OK. Well, it doesn't work on IE7. It ends up showing 2 scroll bars!!!
Pascal said // Apr 04, 2007 at 07:28 PM

So sad. It was a neat and creative idea.
TM4B SMS Gateway said // Apr 30, 2007 at 12:56 AM

So sad indeed!!! Any idea of a JS solution?
Mike said // May 02, 2007 at 07:25 AM

I am also interested in javascript solution Pascal.
Pascal said // May 02, 2007 at 07:52 AM

I've never a javascript solution yet. I would imagine that you could set the height the element like you do in the CSS case. I'll have to investigate this, unless someone else has a solution?
ahh chu said // Jul 07, 2007 at 02:28 PM

thanks for the script. this webpage centering problem was driving me insano! Now everything centers perfectly. The web pages look great even with nonfunctioning scroll bars.

I’m Happy
Jason said // Jan 14, 2008 at 01:56 PM

how’s about simply using both and then incorporating a set of simple browser checks. By finding the browser you can easily utilize the Mozilla overflow-y facility, while leveraging the height 100% and margin-bottom: 1px for IE. Here is what works great for me: (placed in header) <!~~- style sheet calls -~~> <style>@import url(default.css);</style>
<!~~- for mozilla only -~~> <link href="ns.hacks.css" />“); } —>
```



<!-->
```
Pascal said // Jan 15, 2008 at 12:13 PM

Definitely a possibility
Mulli said // Aug 10, 2008 at 11:11 PM

Guys, allow me to ask a question: My vertical scrollbar (iframe) appears on the left handside. How do I force it to appear on the right handside? Thanks
Yann said // Aug 15, 2008 at 12:31 PM

thanks for the tip
Pascal said // Aug 19, 2008 at 01:37 AM

@Mulli: hmm, never seen this! If you figure this out, I’d love to know what was causing this…
Wally said // Oct 07, 2008 at 10:02 AM

html { overflow-y : scroll; } seems to work flawlessly across all browsers
Pascal said // Oct 07, 2008 at 10:25 PM

@ Wally: Interesting idea. Not it is that relevant any more, does it work in IE 5.x?
http://ra-kanzlei-hamm.de said // Jan 09, 2009 at 11:17 AM

thank you very much for your advice. As you likely know this is a very important thing to me!I have checked out a number of sites regarding scrollbars and your advice sounds the most loving. Thanks again for taking the time to listen. May God bless you and your work.
CJ Singh said // Feb 23, 2010 at 09:42 AM

html { overflow-y : scroll; } works like a champ
Pascal said // Mar 01, 2010 at 11:49 PM

As IE6 is about to go into the sunset, I think this should be safe now.
David said // May 26, 2010 at 01:38 PM

Hello -

Thanks for posting this; I have the same concern. Could you provide the exact syntax for the command: “overflow-y : scroll; ” when using straight HTML? Where does this need to go? Anywhere between the body tags? Is that all there is to it?

Regards, David
David said // May 26, 2010 at 01:43 PM

Or, as per above, how to make your original solution work in straight html:

height: 100%; margin-bottom: 1px;

Again, thanks
justin bryan said // Jun 10, 2010 at 10:09 AM

Thanks for sharing your research with us. i checked above code in html txt, its scrolling correctly.
nukebarkley said // Jun 19, 2010 at 07:25 AM

360text is a US based mobile marketing solution provider, engaged in providing sms gateway, bulk sms, mobile content delivery(like ringtones, wallpapers, videos, graphics, animations) and mobile marketing solutions. For more details visit http://www.360text.com