Hiding the scroll bar on an HTML page

Question

Can CSS be used to hide the scroll bar? How would you do this?

Answer 1

If you want scrolling to work, before hiding scrollbars, consider styling them. Modern versions of OS X and mobile OS's have scrollbars that, while impractical for grabbing with a mouse, are quite beautiful and neutral.

To hide scrollbars, a technique by John Kurlak works well except for leaving Firefox users who don't have touchpads with no way to scroll unless they have a mouse with a wheel, which they probably do, but even then they can usually only scroll vertically.

John's technique uses three elements:

• An outer element to mask the scrollbars.
• A middle element to have the scrollbars.
• And a content element to both set the size of the middle element and make it have scrollbars.

It must be possible to set the size of the outer and content elements the same which eliminates using percentages, but I can't think of anything else that won't work with the right tweaking.

My biggest concern is whether all versions of browsers set scrollbars to make visible overflowed content visible. I have tested in current browsers, but not older ones.

Pardon my SASS ;P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Testing

OS X is 10.6.8. Windows is Windows 7.

• Firefox 32.0 Scrollbars hidden. Arrow keys don't scroll, even after clicking to focus, but mouse wheel and two fingers on trackpad do. OS X and Windows.
• Chrome 37.0 Scrollbars hidden. Arrow keys work after clicking to focus. Mouse wheel and trackpad work. OS X and Windows.
• Internet Explorer 11 Scrollbars hidden. Arrow keys work after clicking to focus. Mouse wheel works. Windows.
• Safari 5.1.10 Scrollbars hidden. Arrow keys work after clicking to focus. Mouse wheel and trackpad work. OS X.
• Android 4.4.4 and 4.1.2. Scrollbars hidden. Touch scrolling works. Tried in Chrome 37.0, Firefox 32.0, and HTMLViewer on 4.4.4 (whatever that is). In HTMLViewer, the page is the size of the masked content and can be scrolled too! Scrolling interacts acceptably with page zooming.