How to create a custom scrollbar on a div (Facebook style)

javascript html css scrollbar
Jerome Ansia picture Jerome Ansia · Mar 30, 2012 · Viewed 167.8k times · Source

I'm wonder how the custom scrollbar on Facebook has been made.

Is it only css or some javascript as well?

If yes can i have an idea of what the code looks like?

This question is specific to Facebook scrollbar style and not how to simply have a custom scrollbar

Answer

Daniel Szabo picture Daniel Szabo · Mar 30, 2012

This link should get you started. Long story short, a div that has been styled to look like a scrollbar is used to catch click-and-drag events. Wired up to these events are methods that scroll the contents of another div which is set to an arbitrary height and typically has a css rule of overflow:scroll (there are variants on the css rules but you get the idea).

I'm all about the learning experience -- but after you've learned how it works, I recommend using a library (of which there are many) to do it. It's one of those "don't reinvent" things...

Related questions

How can I get horizontal scrollbars at top and bottom of a div?

Since I'm pretty sure there is no native html or CSS way of doing this, I'm open to doing this with JavaScript. Obviously, I can get a scrollbar at the bottom of my div using overflow: auto in CSS. Is …

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
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More