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

javascript css facebook scrollbar
Achshar picture Achshar · Aug 19, 2011 · Viewed 92.7k times · Source

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

Michael G. picture Michael G. · Nov 4, 2011

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

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

-Mike

Related questions

How can I make the Facebook Like button's width automatically resize?

I'm implementing the Facebook Like Button, but I'm running into some trouble with the width. I'm using the JavaScript SDK implementation, not the direct iframe. According to the documentation, the default width is 450. That's fine, and I understand that the …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More