Web conventions 101 - Scroll bars

Scroll bars need to look and function like scroll bars. This is equally true for flash as it is for normal html pages. Again trying to do it any other way can lead to poor usability. I'll show a very bad and a reasonable good implementation.

First up is the website of the Association of Dutch Designers or BNO for short. Besides some other annoying things, my main gripe with this site is its use of none standard scrollbars. If you look closely at the screenshot below you can probably make out the little triangles at the right of the main text column.

Screenshot of the bno.nl website

By hovering over the triangles at the top and bottom the text column scrolls either up or down. Besides not looking like a scrollbar it also functions pretty poorly. There's no way of knowing how long the actual text is. Scrolling is painfully slow. I can't drag using the mouse and my scrollwheel is ignored.

Overall a pretty poor performance and it's got everything to do with the fact they didn't want the main body of the page to stretch. The white background always has the same height.

My solution to this problem is simple. Let the body stretch the length of the content so you can get rid of the annoying scrollbars.

As an example of a reasonable implementation is the Nintendo Europe website. The screenshot below is a news article. It certainly looks like a scrollbar. It works like a scrollbar. The only thing it doesn't do is react to my scrollwheel.

Screenshot of the nintendo.nl website

Unfortunately for both of them they suffer from one fatal flaw and that's they both rely on Javascript. If I disable Javascript in my browser both pages don't show any content. If you wan't to build an accessible website nix the custom scrollbars.


If you want to make your own scrollbars my best advice to you would be: don't. It costs a lot of time to get right and in the end your still left with a half-baked sollution which performance much worse than native OS scrollbars.

Categorie├źn: usability web annoyances