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

user_456496 0
Viewed 1942

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

image

google-chrome webkit css html
4 Answers

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

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

Answer

From my basic research, I'm not sure this is possible. Based on this css-tricks.com page, which I'd bet you've seen, it doesn't list any pseudo selectors for active or inactive scrollbar buttons. Here are the listed selectors.

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Instead, you might consider removing the buttons all together.

user_11861610

You can try this by using jquery plugin.

Here I have attached the Github link.

Here is the Plugin webpage.

You can also find the examples for the scrollbar from this link.

Another Method:

CSS Scrollbar Customisation

    * {
      list-style:none;
      margin:0;
      padding:0;
    }
    body {
      background: #333;
      padding:20px;
    }
    #content {
      background:transparent;
      height:400px;
      padding:0 10px 0 0;
      width:400px;
    }
    #content li {
      background:#666;
      height:100px;
      margin-bottom:10px;
    }
    #content li:last-child { margin-bottom: 0; }

    .scrollable-content {
      overflow-x:hidden;
      overflow-y:scroll;
    }
    .scrollable-content::-webkit-scrollbar {
      width:30px;
    }
    .scrollable-content::-webkit-scrollbar * {
      background:transparent;
    }
    .scrollable-content::-webkit-scrollbar-thumb {
      background:#999 !important;
    }
<ol class="scrollable-content" id="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Hope this may helps you.

user_57463010

I can only think of doing this via JavaScript,

// Every time the window scrolls.
addEventListener("scroll", () => {
    // When scrollbar is at its zenith, do your CSS.
    if (!document.querySelector("style[data-id=myStyle"))
        head.innerHTML += `<style data-id=myStyle> ::-webkit-scrollbar { opacity: .5 } </style>`;

    // When scrollbar is not at the top, remove the CSS.
    else
        (document.querySelector("style[data-id=myStyle") || document.createElement("style")).remove()
}, false)

I'm sure if this is really possible in CSS, but I really want to be wrong on that. For now, this is all I've got.

user_73645730
Related