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.
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
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
Styling scrollbar only for div, not for entire body
You are missing the content height. Just add content height, you will see scrollbar.
.content{
height:300px; //for example.
}
Is there a way to move custom HTML scrollbar behind a div
You can put a small div inside your outer div and make that the container of your scroll bar to stop the bulging out of these scroll bars eg. fiddle like
<div class="outer">
<div class="inner">
..content
</div>
</div>
.outer{ max-height:200px; width:250px; border-radius:10px; padding:0px 0px; background:#ccc;}.inner{ white-space: nowrap; width:250px; max-height:200px; overflow-x:scroll; overflow-y:hidden; border-radius:8px;}/* width */::-webkit-scrollbar { width: 20px;}
/* Track */::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px;}
/* Handle */::-webkit-scrollbar-thumb { background: #0ef; border-radius: 10px;}
<div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div></div>
Related Topics
Creating Css3 Circles Connected by Lines
Change Button Border Color When the Button Is Being Clicked and After
Html 5 Strange Img Always Adds 3Px Margin At Bottom
I Do Not Want to Inherit the Child Opacity from the Parent in Css
Maintaining the Final State At End of a Css3 Animation
How to Select the "Last Child" With a Specific Class Name in Css
Difference Between Margin and Padding
How to Make Button Look Like a Link
Matching an Empty Input Box Using Css
Control the Dashed Border Stroke Length and Distance Between Strokes
Fixed Position Div Inside Div Container
Transparent Arrow/Triangle Indented Over an Image
::Slotted CSS Selector For Nested Children in Shadowdom Slot
How to Write a ':Hover' Condition For 'A:Before' and 'A:After'