Menu
I tried searching online but I didn't find any good sources on this. Is there a way to style scroll bars with pure CSS so that it is compatible with a maximum number of browsers?
531
In September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS. 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.
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
::-webkit-scrollbar-button This means it will apply the styling for both the horizontal and vertical scrollbar buttons. To apply specific styling for specific buttons here's what you need to use: ::-webkit-scrollbar-button:vertical:start : This is for the up button in the vertical scrollbar.
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.
You can style scrollbars in Internet Explorer and Webkit only.
Note that these are not standard properties.
However, you can achieve this with JavaScript. One project that does this is jScrollPane.
57
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
