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
This question is related to
javascript
html
css
scrollbar
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:
Here's what that looks like:
If you're looking for a Facebook like scroll bar, then I'd highly recommend you take a look at this one:
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!
Source: Stackoverflow.com