Работает ли webkit-scrollbar с webkit-переходом?

Я хочу, чтобы пользовательская полоса прокрутки webkit-анимировала другой цвет фона для состояния зависания. Код ниже изменяет цвет при наведении, но ничего не оживляет. Он работает на div, поэтому я подозреваю, что webkit-scrollbar не играет хорошо с переходами.

::-webkit-scrollbar-thumb {
    background-color: #a8a8a8;
    -webkit-transition: background-color 1s linear;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #f6f6f6;
}

Ответы

Ответ 1

Нет, он не реализован. Мы должны указать ошибку http://bugs.webkit.org/

Ответ 2

Вы можете применить свой переход, установив фоновый цвет -webkit-scrollbar-thumb на inherit и применить переход к родительскому элементу - в этом случае сам контейнер прокрутки.

Единственный недостаток заключается в том, что вам нужно создать внутренний контейнер, который будет маскировать его родительский цвет и установить фон трека прокрутки в тот же цвет маскировки. Вот пример:

Установить цвета и переход контейнера

.container {
  -webkit-transition: background-color 1s linear;
  background-color: #fff;
}

.container:hover {
  background-color: #cfcfcf;
}

.container .inner {
  background-color: #FFFFFF; 
}

Установить цвета прокрутки

::-webkit-scrollbar-thumb {
  background-color: inherit;
}

::-webkit-scrollbar-track {
  background: #fff;
}

Ответ 3

Довольно легко добиться использования метода xb1itz background-color: inherit; в дополнение к -webkit-background-clip: text;.

Живая демоверсия; https://jsfiddle.net/s10f04du/

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .container {
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: rgba(0,0,0,0);
    -webkit-background-clip: text;
    transition: background-color .8s;
  }
  .container:hover {
    background-color: rgba(0,0,0,0.18);  
  }
  .container::-webkit-scrollbar-thumb {
    background-color: inherit;
  }
}