How to create a custom scrollbar on a div (Facebook style)
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...
CSS3 scrollbar styling on a div
Setting overflow: hidden
hides the scrollbar. Set overflow: scroll
to make sure the scrollbar appears all the time.
To use the ::webkit-scrollbar
property, simply target .scroll
before calling it.
.scroll {
width: 200px;
height: 400px;
background: red;
overflow: scroll;
}
.scroll::-webkit-scrollbar {
width: 12px;
}
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
.scroll::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
See this live example
Custom scrollbar only in one div
#boardslist {
&::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.1);
border-radius: 3px;
&:hover {
background: rgba(255,255,255,.2);
}
}
}
Check this out http://codepen.io/tholman/pen/tldwm
CSS customized scroll bar in div
I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility.
Scroll Bar CSS Support
Currently, there exists no cross-browser scroll bar CSS styling definitions. The W3C article I mention at the end has the following statement and was recently updated (10 Oct 2014):
Some browsers (IE, Konqueror) support the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-")
Microsoft
As others have mentioned, Microsoft supports scroll bar styling, but only for IE8 and above.
Example:
.TA {
scrollbar-3dlight-color:gold;
scrollbar-arrow-color:blue;
scrollbar-base-color:;
scrollbar-darkshadow-color:blue;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:
}
Chrome & Safari (WebKit)
Similarly, WebKit now has its own version:
Styling scrollbars: https://www.webkit.org/blog/363/styling-scrollbars/
Demo of all WebKit scroll bar styling
From Custom scrollbars in WebKit, relevant CSS:
/* pseudo elements */
::-webkit-scrollbar { }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-corner { }
::-webkit-resizer { }
/* pseudo class selectors */
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
Firefox (Gecko)
As of version 64 Firefox supports scrollbar styling through the properties scrollbar-color
(partially, W3C draft) and scrollbar-width
(W3C draft). Some good information about the implementation can be found in this answer.
Cross-browser Scroll Bar Styling
JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.
- 20 jQuery Scrollbar plugin with examples (July 24, 2012)
- NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices
- jQuery custom content scroller
- Tiny Scrollbar – A lightweight jQuery plugin
- etc.
- 30+ JavaScript/Ajax Techniques for Sliders, Scrollers and Scrollbars (May 07, 2008)
- 21 Useful Scrollbar CSS/JavaScript Styling Tutorials (August, 2012)
- 15+ Free and Premium jQuery Scrolling Plugins (August 26, 2012)
The list could go on. Your best bet is to search around, research, and test the available solutions. I am sure you will be able to find something that will fit your needs.
Prevent Illegal Scroll Bar Styling
Just in case you want to prevent scroll bar styling that hasn't been properly prefixed with "-vendor", this article over at W3C provides some basic instructions. Basically, you'll need to add the following CSS to a user style sheet associated with your browser. These definitions will override invalid scroll bar styling on any page you visit.
body, html {
scrollbar-face-color: ThreeDFace !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
scrollbar-arrow-color: ButtonText !important;
}
Duplicate or Similar Questions / Source Not Linked Above
- Changing the scrollbars' style
- CSS scrollbar style cross browser
- How to create a custom scrollbar on a div (Facebook style)
Note: This answer contains information from various sources. If a source was used, then it is also linked in this answer.
How to style the ScrollBar using CSS or Javascript?
This question has been answered already multiple times on SO , here are a few links , that should get you sorted :
Custom CSS Scrollbar for Firefox.
Customize scrollbars using CSS
Customize scrollbars using CSS
How can I create custom scrollbar for Mozilla Firefox ith CSS?.
this should get you started. Long story short, a custom
css-styled div is used in conjunction with JavaScript to catch
click-and-drag events on the custom div. Wired up to these events are
methods that scroll the contents of whatever div the custom-scroller
has been attached to.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...
the above is a quote from this answer.
but if ur in a hurry and want to skip the learning phase , heres a plugin thats dead simple to use , and must less hassle then its competition .
How do we make a styled scroll bar for a div with mouse wheel sensitive
I imagine that custom scrollbar is implemented in javascript, it looks very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at: http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly what you want) with Javascript and jQuery: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
Related Topics
Why Does JavaScript Object Show Different Values in Console in Chrome, Firefox, Safari
How to Fix Navigator/Window/Document Is Undefined in Nuxt
How Does _Proto_ Differ from Constructor.Prototype
Web Workers Without a Separate JavaScript File
Difference Between HTMLcollection, Nodelists, and Arrays of Objects
How to Mock an Es6 Module Import Using Jest
How to Programmatically Click a Link with JavaScript
Event When Window.Location.Href Changes
How to Get Jquery to Select Elements with a . (Period) in Their Id
Determine Original Size of Image Cross Browser
Es6 Variable Import Name in Node.Js
JavaScript Require() Function Giving Referenceerror: Require Is Not Defined
How to Make JavaScript Object Using a Variable String to Define the Class Name
JavaScript Removeeventlistener Not Working