title: iPhone-style scroll bar in web app with auto fade in/out
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p><strong>EDIT</strong>: Decided to make it myself. See answer below.</p>