Question

I’m making a web app and really like the iPhone-style scrollbars that automatically fade in and out. I had only ever seen it on iOS products, but now it seems that Facebook has implemented it in the Chat contact list.

Why do I like it so much? It fades in and out automatically, thus it is less obtrusive and can save significant amounts of space. When it is in display, it’s effectively inside the div, instead of around it, again making efficient use of space.

Any ideas on how to do this? It is not Matteo Spinelli’s “iScroll” which adopts the “normal” scrollbar (which for iOS products is of course iOS-style) for use on divs.

I’ve tried to use Jonathan Azoff’s Overscroll Jquery plugin, but I can’t seem it to get it to work exactly right. I managed to get the scroll bars to fade in and out automatically on mouseenter (like Facebook does) but scrolling behaviour differs between browsers (and does seems to be overriding the browser’s scrolling behaviour in both speed and inertia on OSX). A quick glance at the source code seems consistent with this conclusion.

Are there any other plugins/libraries out there that I can use to maintain precisely the browser’s scrolling behaviour but have scroll bars that fade in and out automatically and look iOS-style?

EDIT: Decided to make it myself. See answer below.

Answer 1

Thanks for your input, sun-tzu. I’ve taken a look at tinyscroll and it is quite nice, but I decided it’s not quite perfect enough. In particular, in Firefox (on my macbook) I lose smooth scrolling (and scrolling ends up being in discrete/quantized amounts). A quick glance at the code suggests that this is due to the way they manually process input events and invoke scrolling accordingly to these events. I’d really like to preserve absolutely native scrolling performance and behaviour.

So I wrote my own jQuery plugin, innerscroll. I have open-sourced it on github. A demo is also available here. Just include my file and add 3 lines of code:

$('#content').innerscroll({
    destination: $('#wrapper')
});

where content is the element that is overflowing. Some minor additional setup is that you need to create a parent element wrapper for content with almost identical dimensions, but only a slightly smaller width (to hide content‘s native scrollbar). wrapper is also where the new, fading scrollbar will be placed.

I’m sure there are bugs. Any comments, critique or suggestions would be appreciated.