WebAIM - Web Accessibility In Mind

E-mail List Archives

The Magic Scrollable Div Generator


From: Bryan Garaventa
Date: Jan 12, 2012 9:36AM

I was looking around for a simple scrollable div generator script that didn't require any plugins and automatically supported keyboard functionality, and wasn't able to find one; so I wrote this to do exactly that. It's available at
Which is just the JavaScript code.

The script automatically enables keyboard support for a scrollable div, specifically, all arrow keys, PageUp/PageDown, and Home/End.

This is how it works. Say you have a similar div on your page as the following:

<div id="anything" style="width: 100px; height: 20px; overflow: auto;">
<div class="firstChildNode">
Content Line 1<br />
Content Line 2<br />
Content Line 3

All scrollable content should be within the firstChildNode (the class name doesn't matter).

To enable keyboard functionality, you just do the following:
// For a vertical scroller
// or for a horizontal scroller
scrollableDiv(document.getElementById('anything'), true);
// And that's it.
It just needs to be set once, and resizing the window won't change anything, since the values are calculated on the fly.

I can't see the view moving about, but the numbers for scrollTop/scrollLeft all appear to be updating correctly.

You can see a working example of this at

Simply Tab to the Help icon (first in the tab order) and press Enter.
Focus will automatically be placed on the scrollable div, where you can use Up/Down/Left/Right/PageUp/PageDown/Home/End to control the view.