42

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

Jerome Ansia
  • 6,854
  • 11
  • 53
  • 99

4 Answers4

48

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...

MeSo2
  • 450
  • 1
  • 7
  • 18
Daniel Szabo
  • 7,181
  • 6
  • 48
  • 65
12

Facebook uses a very clever technique I described in context of my scrollbar plugin jsFancyScroll:

The scrolled content is actually scrolled natively by the browser scrolling mechanisms while the native scrollbar is hidden by using overflow definitions and the custom scrollbar is kept in sync by bi-directional event listening.

Feel free to use my plugin for your project: :)

https://github.com/leoselig/jsFancyScroll/

I highly recommend it over plugins such as TinyScrollbar that come with terrible performance issues!

Leo Selig
  • 1,062
  • 1
  • 16
  • 30
  • 1
    This seems like not currently maintained, wanted to use it but the Issues on github are open. If this plugin gets updated, let us know. – Ethan Mar 05 '15 at 00:20
  • @Ethan I would like to know as well, but to be fair, the open issues are pretty lame – Pakman Mar 24 '15 at 16:17
  • @Pakman True, and not being maintained is mostly not good for future, we will have to drop that for an alternative sometime. – Ethan Mar 24 '15 at 17:02
  • 2
    Sorry for the late answer, project is indeed no longer maintained – Leo Selig Mar 25 '15 at 16:36
11

If you're looking for a Facebook like scroll bar, then I'd highly recommend you take a look at this one:

http://rocha.la/jQuery-slimScroll

Mahdi
  • 9,247
  • 9
  • 53
  • 74
  • 2
    400 lines of code for such simple thing is not "slim" ;) – vsync Apr 26 '15 at 22:46
  • @vsync Try to get the same features and browser support with significantly less loc and I'm pretty sure the open-source community will appreciate it a lot! ;) – Mahdi Apr 27 '15 at 05:25
  • 2
    @Mahdi - I did it in 100 lines (4kb) while also making it perform much better. slimScroll is not letting you middle-click the mouse and scroll - a huge accessibility turn-off. http://yaireo.github.io/fakescroll/ – vsync Apr 27 '15 at 07:40
  • @vsync That's awesome! Nice to see a fresh snippet! I think you are not supporting all the features that slimScroll does, but dude, that's already a good job! – Mahdi Apr 27 '15 at 14:07
  • @Mahdi - mine is even better. it works **exactly** the same as a native without any lag, and his slimeScroll only emulates native using poorly written code, and neglects the middle click, which is very important. also, I give options through CSS styling, and slimScroll does those using hard-coded javascript which is a very bad practice. styling should be done via CSS and **not** in javascript. – vsync Apr 27 '15 at 17:13
  • 1
    @Mahdi - Thanks! you can check my github, there are many other nice projects there – vsync Apr 28 '15 at 17:31
  • 1
    @DragosPodaru - IE has many versions. which exactly? personally I haven't been developing for IE for years now.. – vsync Jan 26 '17 at 14:23
  • @vsync i have tried it in IE11, so it's safe to assume it's not working in any IE versions. IE 9 -11 are still important nowadays. –  Jan 27 '17 at 12:59
  • @DragosPodaru - They might be important for **some**, it depends on the product. nobody said that those users needs to see a fancy scrollbar, you should show them the regular (OS) scrollbar. – vsync Jan 27 '17 at 15:05
4

I solved this problem by adding another div as a sibling to the scrolling content div. It's height is set to the radius of the curved borders. There will be design issues if you have content that you want nudged to the very bottom, or text you want to flow into this new div, etc,. but for my UI this thin div is no problem.

The real trick is to have the following structure:

<div class="window">
 <div class="title">Some title text</div>
 <div class="content">Main content area</div>
 <div class="footer"></div>
</div>

Important CSS highlights:

  • Your CSS would define the content region with a height and overflow to allow the scrollbar(s) to appear.
  • The window class gets the same diameter corners as the title and footer
  • The drop shadow, if desired, is only given to the window class
  • The height of the footer div is the same as the radius of the bottom corners

Here's what that looks like:

Bottom right corner

kirasglimmer
  • 114
  • 5