hide scrollbar and show on hover like facebook's new chat sidebar [closed]

Facebook just updated chat (yet again) and now a new fixed side bar stays on the left of the screen. when its contents overflow, a scroll bar appears, but only if scrolled with the mouse wheel or if mouse moves over (or near) the scroll bar. It fades out if the mouse is not over it. it is very useful for thing windowed objects (such as the chat itself). So how does it work?

PS i am looking for a pure html5/css/javascript solution (no jquery or such), no browser support necessary, should work in latest chrome and nothing more, since i am making an app for chrome only.

Here is an update to Stephen P.'s post to have a styled scroll bar.

http://jsfiddle.net/PVZB8/139/

-Mike

You set the overflow to none normally and change it to have overflow-y: scroll on hover.

See http://jsfiddle.net/PVZB8/