Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 835
Achshar Avatar asked Aug 19 '11 17:08

Achshar


People also ask

How do I turn off the side scroll bar?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.

How do I keep scroll bars visible?

Go to Settings / Ease of Access / Display and turn off Automatically hide scroll bars in Windows.

What is the scroll bar on the side of the screen called?

NET documentation refers to it as "scroll box" or "scroll thumb"; in other environments it is called "elevator", "quint", "puck", "wiper" or "grip"; in certain environments where browsers use agnostic language to the scrollbar terminology, the thumb is referred to as the 'pea' for vertical movement of the bar and still ...


2 Answers

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

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

-Mike

like image 130
Michael G. Avatar answered Sep 18 '22 08:09

Michael G.


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

See http://jsfiddle.net/PVZB8/

like image 35
Stephen P Avatar answered Sep 20 '22 08:09

Stephen P