How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div
and not the whole page?
For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar the scrollbar. ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb the draggable scrolling handle.
To apply, add this style to your div element: overflow-y: scroll; height: XXXpx; The height you specify will be the height of the div and once if you have contents to exceed this height, you have to scroll it.
For a scrollable bar, use the x and y-axis. Set the overflow-x: hidden; and overflow-y: auto; to automatically hide the horizontal scrollbar and show a vertical scrollbar. Let's see an example, where the <div> is vertically scrollable.
As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling. However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers. In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers.
I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility.
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-")
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: }
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
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.
JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.
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.
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; }
Note: This answer contains information from various sources. If a source was used, then it is also linked in this answer.
Give this a try
Source : https://nicescroll.areaaperta.com/
Simple Implementation
<script type="text/javascript"> $(document).ready( function() { $("html").niceScroll(); } ); </script>
It is a jQuery plugin scrollbar, so your scrollbars are controllable and look the same across the various OS's.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With