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

Ответ 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, но я действительно хочу ошибаться в этом. На данный момент это все, что у меня есть.