How to create a floating scrollbar like the one on the iPhone?

Question

Hello everyone,

I'm creating a finger friendly web app and am having issues with the scrollbar. Ideally I'm trying to recreate the iPhone's implementation where the scrollbar only appears when the user scrolls the content and disappears when the scrolling stops.

Anyone got any pointers?

Answer 1

First, I'd start with some of the options out there. Azoff has a scrollable plugin to get you started.

On top of that, remove this from the plug-in:

.css({"cursor":"url("+o.icons.open+"), default", "overflow-y": "auto"})

Replace with:

.css({"cursor":"url("+o.icons.open+"), default"})

In your code, using the plugin page as an example:

$(function() {
  $("#overscroll").overscroll();
  $("#overscroll").hover(
    function() { $(this).css({'overflow-y':'scroll'}); },
    function() { $(this).css({'overflow-y':'hidden'}); }
  );
});

This shows the scroll on hover. You could rig up the $("#overscroll").scroll() event to hide/show as well, just be ware that hiding or showing will cause a scroll itself, causing an infinite event loop. You'd need to set some checks on the callback to make sure it isn't a scrollbar hide that's causing the scroll event (It's on drag...so mouse up and scroll wheel check?).