DroidScroll: A CSS-transition based momentum scroller in jQuery plugin format
last updated on the 27th of April 2011
DroidScroll is a jQuery Plugin that makes an element scrollable without the ugly scrollbars. Additionally, it tries to emulate Android's momentum scrolling by using CSS transitions.
- The scrollbars are completely CSS based - you can style then to fit in with any design
- Lots of customization options
- Tiny filesize: minified and with gzip compression it's only 2KB
- Supports scrolling by grabbing, using the scrollwheel and by using the appropriate keys on the keyboard
- Disallows grabbing on certain elements like <textarea> for accesibility reasons
- Also supports using the tab key to jump through anchors for accessibility reasons
- Compatible with modern browsers and degrades gracefully for IE9 and lower
Demo
The script is in use on this very page. Works quite well, doesn't it?
Download
2KB gzip+minified, 6KB minified
Licensed under GPLv3
The archive has the jQuery plugin (19KB) with comments, the minified plugin (6KB) without comments and the CSS files. There are seperate CSS files for Internet Explorer, which you can serve with a conditional comment. Also included are assorted images and cursors.
How to use
Using this plugin is quite easy:
javascript:
$(element).droidscroll();
// or
$(element).droidscroll({ option: value });The only requirement is that overflow should probably be set to hidden on the element it is applied to.
The options
Lotsa options! Not always preferred, but in this case...
| option | default | type | description |
| direction | null | string | 'v' for vertical, 'h' for horizontal or null for both |
| alignmentX | null | string | 'l' or none for left, 'r' for right, 'c' for center alignment |
| alignmentY | null | string | 't' or none for top, 'b' for bottom, 'c' for center alignment |
| transDelay | 500 | int (msec) | should be the same amount of time the CSS transitions last |
| barsDelay | 1500 | int (msec) | how long the scrollbars should stay visible |
| shootMax | 15 | int (msec | how long the dragging should last before it no longer overshoots |
| scrollDist | 100 | int (px) | how much distance should be covered with one tick of the scrollwheel |
| keyDist | 50 | int (px) | how much distance should be covered with one keypress |
| dragDist | 3 | int (px) | how much distance should be covered before dragging kicks in - or: drag delay |
| focusAdd | 10 | int (px) | how much margin to add when tabbing through anchors |
| useKeys | false | boolean | if the keys should be captured for this instance |
The last can be temporarily overridden, like so:
javascript:
$(element).data('ds-scr', false);Documentation
Sorry, haven't gotten around to writing some docs. Or an example, for that matter. But it shouldn't be too hard; the source code is bursting with comments.
Known issues
- Mousedown event handler might get 'stuck' in IE8 until you mousedown and mouseup again
- The shootMax variable isn't correctly implemented; it should be polled instead for correct 'throw' effect
- Bars might show/hide when firing multiple keyPress events ~500ms after each other. Should re-arrange the bars timeout to fix this
- Find a way to track the current momentum to enable correct acceleration effect. The way it is now is usable, but not perfect
- When tabbing through anchors, those above the current view will not be scrolled into view. Should be easy to fix
- The override for useKeys is 'ds-scr' instead of something like 'ds-useKeys'. Should fix
- Right-clicking a link makes it scroll to the bottom by activating AnchorFocus. That ain't right. Should fix
The license
Licensed under the GNU General Public License 3.0 (GPLv3), see here.
Questions?
Questions? Comments? Found a bug? Contact me.