Simple Custom Scrolling

I mentioned recently that I think scrollbars as we know them today need to be replaced with better metaphors. While I don’t claim to know what those should be, by coincidence, a couple of my current projects will be exploring some custom scrolling controls.

One good thing about using system-provided scrollbars is that their engineering cost is essentially zero, whereas custom scrolling typically requires writing code to handle mouse events and move the scrollable region accordingly.

How challenging that code is depends on how sophisticated your custom scrolling mechanism needs to be, and how easy or hard those things are to implement in your target environment.  For example, do you need to write code specifically to handle the mouse scroll wheel? Do you need/want acceleration? Momentum? Drag-to-scroll? “Forever” scrolling a la Google Reader?

So, about a week ago, I decided to whip up some simple custom scrolling code as a proof of concept.  It’s really not all that impressive since it acts like a system-provided scrollable area sans the system-provided scrollbar.  It would almost certainly need to be more sophisticated for a real application.  For example, I only did horizontal because that is the particular case I’m dealing with in one of my projects, and I didn’t actually implement a custom scrollbar, only the scrolling mechanism itself.

But, I think it did it’s job, which was to prove that, at least in a browser, it’s not unreasonably hard to create the guts of a custom scrolling mechanism that behaves intuitively.

Feel free to try it out, view source, reuse the ideas, and post ideas, suggestions, or code to make it better!