Good Scrollbars Are More Complex Than They First Appear

posted by Kravimir at 1:44 PM on Mar. 21st, 2011

Categories: JavaScript and DOM, Usability & UX 1 comments

It seems pretty much everyone is aware of the up and down (or left and right) arrows of scrollbar. However, there are several more features to a good scrollbar. Most people also notice the drag-bar, but did you realize that the length of the drag-bar relative to the "track" (or "gutter") is used to indicate how much of the page is currently in view? Also have you ever clicked in the track itself to make the page scroll one screen's-worth?

Before making your own scrolling mechanism, I'd like to remind you that the keyboard and mouse (and other pointing devices) can also be used to scroll. The arrow keys and, for full-size keyboards, the "page up" and "page down" keys are nearly universal scrolling controls, but have you realized that the spacebar, "home", and "end" keys can also be used to scroll in many web browsers as well? Mice and trackballs often include a scroll-wheel these days and, likewise, touchpads often include a special region to drag your fingertip on to scroll.

The reason I'm writing this is that most of the custom scrollbars I've seen are missing many of those features. To be clear, I'm not saying all custom scrollbars are bad. For those who would like to create your own scrollbar design here are two scripts that I would recommend: jScrollPane and FleXcroll. At least in some configurations, those scripts support all of the features mentioned above. They might be difficult for people, especially novice users, to identify on the page though.

This has been a public service announcement aimed at graphic designers in the hopes that they'll rethink creating custom scrollbars and other scrolling controls that cause frustrating user experiences.

Related:

#1

I feel so much happier now I undretsand all this. Thanks!

Kristabelle 2:12 PM on Jun. 13th, 2011

I feel so much happier now I undretsand all this. Thanks!

Comment Form: