Как создать пользовательский стиль CSS для состояния "отключено" при настройке кнопки прокрутки webkit

Нормальные кнопки стрелок прокрутки хрома имеют состояние, подобное отключенному, когда большой палец прокрутки полностью соответствует стрелке.

Есть селектора ::-webkit-scrollbar* для стилизации полос прокрутки.

Какой селектор можно использовать для стилизации этого конкретного состояния кнопки? ::webkit-scrollbar-button:disabled не работает для этого состояния.

Codepen: https://codepen.io/mattyork/pen/oGWOZY?editors=1100

Ответ 1

Если вам нечего прокручивать, я просто скрою полосу прокрутки.

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

Ответ 2

Ответ

Из моих основных исследований я не уверен, что это возможно. Основываясь на этой странице css-tricks.com, которую я бы поставил, вы видели, что она не перечисляет псевдоселекторов для активных или неактивных кнопки прокрутки. Вот перечисленные селектора.

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

Вместо этого вы можете рассмотреть возможность удаления всех кнопок.

Ответ 3

Вы можете попробовать это, используя плагин jquery.

Здесь я прикрепил ссылку Github.

Вот веб-страница .

Вы также можете найти примеры для полосы прокрутки из этой .

Другой метод:

Настройка прокрутки CSS

    * {
      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>

Ответ 4

Я могу думать только об этом с помощью 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)

Я уверен, что это действительно возможно в CSS, но я действительно хочу ошибаться в этом. На данный момент это все, что у меня есть.