The Hickensian

∞ Anne said 2002 days ago:

In XHTML that second method would add two scrollbars.

(Two properties already implemented by Internet Explorer are now part of CSS3 and can probably be of help with this in the future, ‘overflow-x’ and ‘overflow-y’.)

∞ Mike Stenhouse said 2002 days ago:

I haven’t tested this but how about:

html,body {
   height: 100.1%;
}

You still risk confusing people with the unnecessary scrollbar though…

When it comes down to it I’d go for shifting content over those ugly horizontal bars.

∞ Jon Hicks said 2002 days ago:

I know you meant 2 sets of scrollbars Anne- so did i! Thats the point – it forces scrollbars to appear so that it doesn’t cause the shift. I don’t like using it because of the 2 scrollbars thing, but its personal choice.

∞ Phill Kenoyer said 2002 days ago:

I’ve tried the html,body {height:101%} and it works in Safari. I have not tested in MSExploder.

∞ Laurens Holst said 2002 days ago:

Does setting height: 800px; actually work??? I’d say you would have to set

min-height: 800px;

and add a special ’* html’ rule for IE with the other setting (because it doesn’t support the min- and max- properties). Otherwise you might have the chance that all content below the 800 pixels is hidden in some browsers (well, depending on the overflow setting, I guess).

~Grauw

∞ Jeff said 2002 days ago:

I’ve always wanted a good solution for this problem (especially since I switched to Firefox from WinIE, which always had a vertical scroll gutter regardless of content height). My concern is how does this affect printed pages? On an XHTML page with only enough content to fill one printed page, will the forced XHTML vertical height add an extra, uneeded printed page?

∞ Jon Hicks said 2002 days ago:

Laurens – yes setting the body height to be 800px does work – unless you have a large resolution monitor (as mentioned above. I haven’t had any problems with browsers hiding content over the 800px, it just expands to suit.

The html { min-height: 101%; } idea sounded great, but it didn’t work for me in Safari, Firefox or Opera. It also leaves IE out cold, although you were right - it does always show a vertical scroll bar. You said you were able to get it working in Moz and Opera>

Jeff – I haven’t come across any printing problems, but all you would have to do is specify a print stylesheet to override it.

Joen – thanks, I’ve had a look through those and tried them, but nothing seemed to work. I like your site though!

∞ Olly Hodgson said 2002 days ago:

Is this really that much of a problem? I can’t say its ever bothered me, or my clients.

That said, maybe clients will ask me to sort it out when they eventually move away from Internet Explorer ;-)

∞ Jon Hicks said 2002 days ago:

Patrick – I do beleive that you are what is known in the trade as a geezer. That works beautifully in Safari et al (even v1.0). It gives just 1px’s worth of scroll! Perfect! I’ll update the post with your solution.

Olly – thats the thing. I have many clients who don’t use IE, and have complained about the shiftingm problem.

∞ Bruce Boughton said 2002 days ago:

That shift had always bugged me browsing in Mozilla. I’d never analysed when it occured or managed to put it down to lack of scrollbars. You learn something everyday.

As this has always annoyed me, I’ll employ Patrick’s work-around as part of my default css code. Thanks Patrick. All it needed was some lateral thinking (or should that be longitudinal thinking??).

∞ Laurens Holst said 2002 days ago:

html { min-height: 101%; } works just fine overhere… Short test file:

http://www.grauw.nl/test/vscrollbar.html

Really works great for me (as it’s supposed to) in both Mozilla and Opera. Not in IE of course but there it’s not needed anyway. I can’t imagine Mozilla nor Opera render differently on the Mac so I guess you did something wrong… Anyways, I’d like to know how well it works on Safari. It should be ok, afaik their standards-support is better than IE ;p.

And using min-height is really way better than all this height-stuff (which basically sets a fixed height)...

~Grauw

∞ Laurens Holst said 2002 days ago:

Oh… Patrick’s solution is great :). Except for the use of ‘height’ instead of ‘min-height’. I’ve reflected it in the test file on my site. That should then be the best way to do it, if you ask me.

~Grauw

∞ Lachlan Hunt said 2002 days ago:

What is the point of this? Why does it matter that some user interfaces don’t have a scrollbar for shorter content? That’s something that the application is in control of, and under no circumstances should an author attempt to control that interface in anyway, even if it is only to force a scroll bar.

The same rule applies to those scripts that open new windows without toolbars, status bars or whatever, and try to prevent context menus, etc… I’m sure most people reading this would agree that those scripts are annoying, but where do you draw the line on what application interface features can be controlled? Ideally, the application would provide the option to the user to display or hide the scollbar when the content is too short.

Personally, I prefer that it be hidden instead of having a scrollbar that only moves 1px as some of the suggested methods force.

∞ Lachlan Hunt said 2002 days ago:

Phillip wrote:
“Can this idea be put into the chrome prefs to keep the scroll bar there permenantly, regardless of the site?”

That’s the best idea for this yet! It’s the user’s and/or the application’s decision to have a scrollbar permanently visible or not! It must not be the author’s decision under any circumstances!!! (except of course when the author and the user are the same person. ie. when viewing your own site)

∞ Lachlan Hunt said 2002 days ago:

Patrick wrote:
“i’d argue that the presence of a practically unmovable scrollbar is a far lower disruption to the user experience than a design that jumps left/right by a good 10 pixel…”

As a user, that’s certainly your decision to make as to which you find more annoying: Content moving slightly from one page to the next, or a permanent scroll bar, that does essentially nothing.

Personally, I find the scrollbar more annoying and until now, on the few sites I’ve seen this occur, I always thought it was just a bug that the author didn’t know how to fix (and in some cases it probably is). Though, I never thought it would be intentional.

∞ Jeff Minard said 2001 days ago:

Well, I for one, plan on using this.

Lachlan has brought up some interesting points, but it’s my opinion (and it seems to be shared amoung other posters) that users are more likely to notice a jarring shift of the whole page than they are to notice an oddly non-functional scrollbar.

∞ Jon Hicks said 2001 days ago:

Thanks for your response Patrick. ‘What he said”. I think users are accustomed to a vertical scrollbar, and forcing one that only had a 1px scroll is no problem. I could understand your concerns if it was adding a horizontal scrollbar. Anyway Patrick’s a genius, and I’m jolly well going to use that idea!

Anne – because it doesn’t work in Safari unfortunately.

Jeff – agreed. Its not a ‘slight’ movement. Its 16px, which is more than enough to look shoddy.

∞ Lachlan Hunt said 2001 days ago:

Jeff wrote:
“…users are more likely to notice a jarring shift of the whole page than they are to notice an oddly non-functional scrollbar.”

If that is true, then I suggest you try taking this discussion up with the browser vendors. File bugs with Mozilla, Opera, Safari, etc. and ask for the feature to be added so the user can decide how they want their scrollbar.

However, I question the accuracy of that statement anyway. Has anyone done a survey of average users about what they prefer? Has anyone (Jakob Nielsen?) done a usability study on this? Does anyone really think the average user will notice, let alone care about a slight shift in layout?

Also, do I really have to point out that any usage or user preference statistics on the Internet are useless anyway? Not only due to their questionable accuracy, but who cares if 95% prefer it one way, there’s no point making a decision that will still frustrate 5%, especially when it’s a decision that should ideally be up to the user.

It’d be like deciding that 95% of the world use IE, so why bother developing for anything else? Of course, you all (hopefully) know that that’s a bad idea, I’m just comparing a few statistics… (keeping in mind that statistics has never been a strong subject of mine, so my comparison’s are probably completely bogus anyway)

Marcel wrote:
“A grayed-out scrollbar like IE has is much better than no scrollbar, like Mozilla has…”

I disagree. I prefer Mozilla’s no-scrollbar approach, but that’s probably just because I’ve always been a Netscape/Mozilla user, so it’s what I’m used to. A disabled scrollbar, however, is better than a scrollbar that only scrolls 1px. Whenever I get a scrollbar close to that, I always stretch my window to avoid the scrollbar completely (it’s just a habbit). I get annoyed with those that don’t disappear.

I respect that as a user, it is your computer, your browser, and your choice to make when viewing a site. However, I would not want you, as an author, making that decision for me when I’m viewing your site. The fact that the only way, currently, for the user to decide seems to be to use IE if you want the scrollbar, and another if you don’t, is completely irrelevant. As I said before, file a bug with the UAs and request the feature so it’s not left up to the author.

∞ Laurens Holst said 2001 days ago:

Aw, too bad that it doesn’t work in Safari… Let’s hope it will in the next version ;p.

~Grauw

∞ Lachlan Hunt said 2001 days ago:

Before I point out the flaws in your arguments, I would just like to say that what you’re really looking for applies to the viewport, not to any element including html or body. Thus, the ideal solution to both our problems would be:

@viewport {
overflow-x: auto;
overflow-y: scroll;
}

In this case, it’s a suggestion, rather than forcing. These rules, unlike your proposed styles are easily overrideable, and will not interfere with anyone who is legitimately using those properties on html and/or body, if I were to include an override in my user stylesheet. In this case, I can quite happily override your suggestion by writing:

@viewport {
overflow-x: auto;
overflow-y: auto;
}

I plan to write up my full reasons for and against all your proposed methods and post it to my blog. I’ll let you know when I complete it.

Patrick wrote:
“as soon as you do anything other than sending unstyled html to a browser, you’re making a decision on behalf of the user”

No! I’m only complaining about authors forcing application interface presentation. Authors have a right to suggest the default presentation of their content however they like, but when it comes to the application interface, such as scrollbars (or worse, new windows and toolbars) then that’s starting to cross the line. As a general rule, authors have a right to suggest the default presentation for anything inside the viewport, but not outside.

Jon Hicks wrote:
“We’re not talking about pop-up windows or flash movies here, just a flippin’ vertical scrollbar, surely a common enough sight on the web.”

No, we’re not, and it’s not as serious as either of those, but it’s still annoying when done in any of your proposed methods. The users are the ones viewing the site, not you, so it’s their decison.

I’m not just deciding that most people wouldn’t like forced scrollbars, I’m just insisting that as authors, we don’t force a change in the user’s expected UA behaviour. We can suggest but never force anything upon the user. It is true that currently, users cannot decide if a scrollbar always appears easily, though as comment 26 suggested and using @viewport in my example above, the user would be able to make the decision.

∞ Jon Hicks said 2000 days ago:

Lachlan wrote:
“I should also point out that @viewport, used in my examples, AFAIK, is not yet in any CSS3 draft, but it has been discussed on www-style as a possible addition.”

So we’ve got a bit of a wait then? ;o)

I still think that a vertical scrollbar is not detrimental to the user. I also think that Patricks comment is still valid. The styling of a page is all part of interface presentation.

∞ kez said 1999 days ago:

Haven’t read through all the comments here, but I needed to fake a scrollbar on a site I’m designing.

This is an adaption of the 1px margin-bottom ones up above, that actually gives me no scrolling at all!

html {
height: 100%;
margin-bottom: 0.01em;
}

Works good here :)

∞ ReadMe said 1999 days ago:

What is preferrable, forcing a scrollbar in Saf or this technique stopping the height of the body at 100%;?

if you just use height this is what will happen so i would suggest that min-height is prefferred.

∞ ReadMe said 1997 days ago:

but my point is if you do that it wont work at all, because without an overflow: stretch; property, the default overflow value of visible will be used which will cause the content to be rendered outside the element’s containing box.

(overflow: stretch; doesnt exist btw)

∞ patrick h. lauke said 1997 days ago:

don’t apply it to the body, apply it to the html element. i’ve tested it, and couldn’t replicate any of the problems anne mentioned in comment nr 30, or any other “body stops at 100% ones”

∞ Lachlan Hunt said 1982 days ago:

At last, Mozilla now supports overflow-x and overflox-y, so you can quit forcing scrollbars with these annoying hacks, get yourself a copy of Mozilla 1.8a4 or a nightly Firefox build, and add this to your user stylesheet.

:root { overflow-y: scroll; }

Don’t put them in your site style sheet, let the user decide; however at least I’ll be able to override it easily using those properties anyway.

:root { overflow-y: auto !important }

∞ Lachlan Hunt said 1982 days ago:

I realise that not many average users would know how, but how many of those users would either notice or care about it? I would like to see a survey done on this, but that could be very difficult to get good size sample, of the non-web development community.

However, that’s beside the point. There’s nothing to say that the application can’t add an option in the options dialog, to make it easy for the average user. I suggest you take a look at this bug that discusses the issue.
http://bugzilla.mozilla.org/show_bug.cgi?id=72540