hide scrollbar and show on hover like facebook'

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 2 years ago.

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.

Answer 1

I would like to revive this thread for the benefit of future visitors and essentially sum up the other answers to this thread. I prefer jsFancyScroll (thanks Leo Selig!) as well as nanoScrollerJS (thanks ip!) because they both "retain the natural scrolling experience provided by the OS." Just try searching for a selection of text and then looking at the location of the scrollbar in the various implementations to see what I mean.

If you don't care for styling the scrollbar and just want it to auto-hide, Stephen P's answer looks to be the most elegant and best supported.

Answer 2

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

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

-Mike

Answer 3

This might not be the exact answer to the question, because it is asked for a solution without jQuery. But I came here via a search engine and I am using jQuery. If you want a solution that feels as smooth as and looks exactly like in facebook, take a look at this:

See http://rocha.la/jQuery-slimScroll

Answer 4

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

See http://jsfiddle.net/PVZB8/

Answer 5

You might also want to check out nano scroller.