Tuesday, November 4th, 2008

A Better Scrollable Component, Using jQuery

Category: jQuery

Nater Kane wrote in to share his experience creating one of those “scrollable” components:

I was having a bit of difficulty finding a jQuery plugin that not only provided scrolling behavior to a list of elements, but also used & then generated markup that could still be accessible, semantic & validate whether or not the user ran the javascript.

Nater took the existing jquery.scrollable.js plug-in by Tero Piirainen and enhanced it in the following ways:

1. make those items scrollable horizotally or vertically
2. decide how many items are visible at once
3. scroll elements with mouse, arrow keys and mousewheel (requires mousewheel.js)
4. make navigational buttons without programming
5. have programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
6. need to know when list is scrolled with custom event listener
7. You can now start with semantic markup
8. I want this all in single js file that weights only 3.9 4.1 Kb minified!

Check out Nate’s blog for more details, including the source.

Posted by Ben Galbraith at 8:00 am

2.3 rating from 46 votes


Comments feed TrackBack URI

link broken yet again.

why is ajaxian so bad at pasting links into a blog body?

Comment by ilazarte — November 4, 2008

@ilazarte: Because we usually write the posts in the wee hours of the morning when we’re dead tired. ;-) I’ve fixed the second link, sorry about that.

Comment by Ben Galbraith — November 4, 2008


The mousewheel support just piggybacked the separate jquery.mousewheel.js plugin that I did not write. it’s caveats are not something I could be responsible for.

This plugin came from a real world project, that had specific requirements, and would have been done slightly different if i had spent more than 2-3 hours writing it.

The speed of the scrolling is not fixed, but is variable and can be set with a parameter. What your experience was, in almost every way, can be adjusted with a few changes to the parameters that are set when the code is invoked.

Comment by naterkane — November 4, 2008

This isn’t a bad idea, it’s just not a very good implementation. It has no support, for example, for acceleration, which is an absolute must when hijacking the scroll wheel.

It’s also important to note that tying behavior specifically to a scroll wheel is a usability nightmare for people who don’t have a scroll wheel (having up/down thumbs does not make up for the lack of a slider thumb).

Comment by eyelidlessness — November 4, 2008

it’s doesn’t require the mousewheel plugin. but if someone wants to make it available, it works and that interaction is supported. did any of you read the source? my guess is no.

Comment by naterkane — November 5, 2008

Some more suggestions:
– Don’t “cache” click events. When I hammer the down button to get the thing to move to where I want, and I stop clicking, the scroller also needs to stop moving immediately.
– When clicking during a scroll, either speed up the animation, or skip it altogether, because it indicates the user is impatient and doesn’t want to wait until the end of the animation.
– When holding down the mouse button on the up/down buttons, keep scrolling.
@naterkane: don’t take all the criticism too personally. Most components that come on ajaxian get absolutely trashed in the comments. We’re all great at armchair coding.

Comment by Joeri — November 5, 2008

Quite cool and nice looking, liked that it’s less than 4KB of JS, though the sample is NOT XHTML compliant (HTML validator complains) – which I think may be due to missing href attributes or something…
Apart from than, quite nice and good looking… :)

Comment by ThomasHansen — November 6, 2008

Leave a comment

You must be logged in to post a comment.