How to give a custom CSS style for the "disabled" state when customizing a webkit scrollbar button

Question

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

Answer 1

If there is nothing to scroll to, I would just hide the scrollbar altogether.

body {
        overflow: hidden;
        height: 100vh;
     }