Menu
I want to change the scrollbar color in Firefox. How can I do that?
378
Change Firefox's Scrollbar Style to One of Your ChoosingIt's one of the many hidden configuration options in Mozilla Firefox's Advanced Preferences tab. With this menu, you can choose whatever style suits you best.
Right Click on Taskbar and Click on Taskbar Settings > on the Sidebar, Click on Colors > and you will find Start, Taskbar and Action Center, Please check this and select a color which you like.
As of now, 2021, there are just two properties for Firefox scrollbar customization available; scrollbar-color and scrollbar width .
Left-click and drag the small circle on the Scrollbar thumb color palette to select a color there. You can also choose different shades for your selected color by dragging the HSV bar sliders up and down. Drag the circle within the Scrollbar track color palette to choose a color for the track bar.
Changing the scrollbar color in Firefox is not as trivial as it is in Internet Explorer and Opera. Firefox only allows the style of the scrollbar to be set by the theme. This is a good thing. Lots of users don't like having the look and feel of interface widgets randomly changed at the whim of a designer. Changing the look of interface pieces can be even more of a problem for visually impaired visitors who may be using a high contrast theme.
That said, if the scrollbar is contained within a <div> in your page, you can create a custom scrollbar and make it functional using JavaScript. This jQuery plugin looks like it would do the trick pretty nicely: http://jscrollpane.kelvinluck.com/
I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html
Here's how it works:
Inside the document's <head>, we have to reference several stylesheets and scripts (which you've probably already downloaded from http://jscrollpane.kelvinluck.com/.
This is where a vast majority of the magic happens:
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding:0;
}
#container {
height:100%;
width:100%;
margin: 0;
padding:0;
overflow: auto;
}
</style>
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scroll-pane').jScrollPane();
});
</script>
This assumes that the css and js files are located in the same directory as your html file. We start by linking to the provided stylesheet.
Then, add a bit of CSS to prevent the normal scrollbars from showing. Set the margin and padding of html and body to 0, and set the height to 100%. All of our content will be wrapped in a div with an id of "container". This container fills the page exactly (height: 100%; width:100%;) and it steals the scrolling so that we can customize the scrollbar (overflow: auto;).
Then we reference all of the appropriate scripts. Here I'm using the copy of jQuery hosted by Google, and again I'm assuming that all of the local scripts are in the same directory as the html file. The last little bit of jquery finds all of the divs with the "scroll-pane" class and adds the appropriate elements and scroll functionality to them.
The html is then very simple.
<body>
<div class="scroll-pane" id="container">
All of your content for the page goes here.
</div>
</body>
If you've done everything right, your page should look like my example.
157
Chrome and Safari do support the coloring of the scrollbars. Place the following code in your css and see the magic happen:
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #969696;
-webkit-border-radius: 1ex;
}
::-webkit-scrollbar-thumb {
background: #2B2B2B;
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #1A1A1A;
}
The only thing missing is for firefox to support this feature.
31
Since version 64 Firefox allows limited styling of scrollbars:
.my-scrollable {
scrollbar-color: red blue;
scrollbar-width: thin;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
45
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
