Menu
Is there a way to temporarily change the scrollbar width in FF or IE while I'm testing some layout code?
I remember reading something a while back about this being related to resolution, but can't quite remember. I tried changing the resolution of the computer itself, tried increasing browser font size, but both didn't work.
Update I've come across this thread that describes how to edit the settings from within Firefox, but it doesn't work smoothly, at least hasn't worked smoothly yet for me. The asker said it eventually worked for him, so I'll do more testing later.
932
Change Scrollbar Width in Windows 11/10Select the key and in the right pane of WindowsMetrics, double-click 'ScrollHeight' word. Instantly, a window should appear on your computer screen (EDIT DWORD). In the value data field of the window, enter a data value. The default value for scroll width is -225.
On the Options page, you will see a slider for Scrollbar Size. Move the slider from left to right to change the width of scrollbars. The higher the size, the wider will be the width of the scrollbars, and vice-versa. The changes are applied immediately and you can also see the same on its Options page.
Scrollbar Selectors 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 get the width of the scrollbar, you use the offsetWidth and clientWidth of the Element : The offsetWidth returns the width of the Element in pixels including the scrollbar. The clientWidth returns the with of the Element in pixels without the scrollbar.
::-webkit-scrollbar {
width: 6px;
background-color: rgba(0,0,0,0);
-webkit-border-radius: 80px;
}
::-webkit-scrollbar:hover {
background-color: rgba(0, 0, 0, 0.09);
}
::-webkit-scrollbar-thumb:vertical {
background: rgba(0,0,0,0.61);
-webkit-border-radius: 80px;
}
::-webkit-scrollbar-thumb:vertical:active {
background: rgba(0,0,0,0.61);
-webkit-border-radius: 80px;
}
/*Try this*/
I think this might be what you are looking for...
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
It allows you to completely control the style of your scrollbars.
25
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
