Forcing scrollbars (now even better)

17 Aug 2004

The massive trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens in Opera, Mozilla and Safari as the window makes room for the scrollbars. The only way to avoid this is to force scrollbars to appear all the time.

Here are a few solutions, and as you would expect, they each have their own pros and cons:

html>body { height: 800px; }

For: Simple, and works in most situations. This is the one I tend to use. The First-child selector hides the rule from IE windows that always adds a vertical scrollbar gutter anyway.
Against: Doesn’t work on large resolution monitors. Also, where it does add scrollbars constantly, there may be no content to see. Possibly confusing for users.

html>body { overflow:scroll; }

For: This does a better job at being less confusing. In Safari, this just adds scrollbar gutters, in others it adds scrollbars, but with a very small overflow length. Therefore, doesn’t confuse users with scrollbars for no content.
Against: It looks damn ugly as it adds horizontal scrollbars as well as vertical.

#Content p.bstext {
        font-size:216px;
        font-weight:900;
        line-height:130px;
        letter-spacing:-69px;
        overflow:hidden;
        color:#FFF;
        background:transparent;
}

This technique was found at the Web Standards Awards. I haven’t tried this one out yet, but on the face of it, it looks like an over-complication.

Update

Thanks to Patrick Lauke who came up with this genius solution:

html { height: 100%; margin-bottom: 1px; }

This adds a tiny amount of vertical scroll (1px no less), so users won’t think that there is content that they’re missing. This will also work on any resolution screen. I’ve tested this in Safari, Omniweb 5, Firefox on OS X, and it works like a dream! The only browser I could find that had a problem with it was (guess!) IE 5 Mac.

Recent Posts

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Instagram Hickstagram

  • 11 Nov 2018

    It’s got to the PowerPoint presentation part of Gruff Rhys’ set.

  • 11 Nov 2018

  • 06 Nov 2018

    The light falling on @matthamm this afternoon was like a renaissance painting

  • 02 Nov 2018

    Vector illustration of a Tufted Duck, using @affinitybyserif Designer on the iPad Pro (+ Pencil). This app is a game changer, letting me do the kind of work I’d normally need a desktop computer and a Wacom tablet for. #illustration #birdillustration

  • 01 Nov 2018

  • 01 Nov 2018

  • 31 Oct 2018

    Inktober Day 31: last day! @hicksmade and I decided to finish on a joint drawing using the Inktober logo as the basis. It’s been really fun to do this together, and I never thought we’d manage to keep it up to the end 😊 #inktober #inktober2018 #leighandjondoinktober

  • 30 Oct 2018

    Inktober Day 30. Almost there! @hicksmade drew our retriever Olive, who was named after “Olive the other Reindeer” by J Otto Seibold. This is Olive, with Martini the Penguin, on their way to the North Pole. #inktober #inktober2018 #leighandjondoinktober

  • 29 Oct 2018

    Inktober Day 29. Taking the theme of ‘lies’ from @hicksmade’s post today, here’s a generic picture of a liar. No one particular in mind… #inktober #inktober2018 #leighandjondoinktober #liar

  • 29 Oct 2018

    Inktober Day 28. From @hicksmade’s Willo the Wisp character to its narrator, Kenneth Williams #inktober #inktober2018 #leighandjondoinktober

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom