Custom scrollbar cross-browser support
It is better to use javascript for scrollbars since they are not fully supported by all browsers. those libraries are examples to use:
- Simple-scrollbar
- SimpleBar
The following example uses simpleBar. see documentation above for options.
new SimpleBar(document.getElementById('container'));
#container { width: 300p; height: 350px; border: 1px solid #eee;}
.text {text-align: center; padding: 100px 50px;}
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /><div id="container"> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
CSS scrollbar style cross browser
Scrollbar CSS styles are an oddity invented by Microsoft developers. They are not part of the W3C standard for CSS and therefore most browsers just ignore them.
Custom scroll bar cross browser
Here's the solution to the question:
// *** HIDING THE SCROLLBAR ***
// For Chrome, Safari, and Opera
.scrolling-div::-webkit-scrollbar {
display: none;
}
// For Firefox
.scrolling-div {
scrollbar-width: none;
};
// For Internet Explorer and Edge
.scrolling-div::-ms-scrollbar {
overflow-style: none;
}
Cross-browser styling scrollbars
Check out JScrollbar
Is there a solution to style scrollbars globally?
you can define a global.css/global.scss file wherein you can specify the following styling
/* Scroll bar stylings */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: var(--lightestgrey);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
and import it in your main.js file using
import '../styles/global.css' // specify the path depending on your file structure
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 CSS Scrollbar for Firefox
As of late 2018, there is now limited customization available in Firefox!
See these answers:
- https://stackoverflow.com/a/54101063/405015
- https://stackoverflow.com/a/53739309/405015
And this for background info: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
There's no Firefox equivalent to ::-webkit-scrollbar
and friends.
You'll have to stick with JavaScript.
Plenty of people would like this feature, see: https://bugzilla.mozilla.org/show_bug.cgi?id=77790
As far as JavaScript replacements go, you can try:
- https://github.com/mdbootstrap/perfect-scrollbar
- https://github.com/Grsmto/simplebar
- https://github.com/vitch/jScrollPane
Related Topics
How to Force a Div Block to Extend to the Bottom of a Page Even If It Has No Content
Is There a CSS Parent Selector
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector
Why Can't an Element With a Z-Index Value Cover Its Child
Which Characters Are Valid in CSS Class Names/Selectors
How to Make Bootstrap Columns All the Same Height
Bootstrap Center Vertical and Horizontal Alignment
Vertical Align Center in Bootstrap 4
Font Scaling Based on Width of Container
Media Queries: How to Target Desktop, Tablet, and Mobile
Why Is a Flex Item Limited to Parent Size
Fill Remaining Vertical Space With CSS Using Display:Flex
How Are the Points in CSS Specificity Calculated
Html 5 Strange Img Always Adds 3Px Margin At Bottom
Single Huge .Css File Vs. Multiple Smaller Specific .Css Files
How to Center Text in Select Box