Menu
Normal chrome scrollbar arrow buttons have a disabled-like state when the scrollbar thumb is all the way to the arrow.
There are ::-webkit-scrollbar* selectors for styling scrollbars.
What selector can I use to style that particular state of the button? ::webkit-scrollbar-button:disabled does not work for this state.
Codepen: https://codepen.io/mattyork/pen/oGWOZY?editors=1100
710
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.
::-webkit-scrollbar is a pseudo-element in CSS employed to modify the look of a browser's scrollbar. Before we start with how it works and how can it be implemented, we need to know some facts about the element. Browsers like Chrome, Safari and Opera support this standard. Browsers like firefox don't support this.
Upon activation, you need to head over to Settings » Custom Color Scrollbar Settings page to configure plugin. From here, you can change the scrollbar color and the scrollbar rail background colors. You can then select the mouse scroll step, which is the scrolling speed of the mouse wheel.
If there is nothing to scroll to, I would just hide the scrollbar altogether.
body {
overflow: hidden;
height: 100vh;
}
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
