How to create a custom scrollbar on a div Facebook style

Question

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

User · Answer

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

User · Answer

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    lt div class  window  gt    lt div class  title  gt Some title text lt  div gt    lt div class  content  gt Main content area lt  div gt    lt div class  footer  gt  lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to html

Examples related to css

Examples related to scrollbar