Работает ли webkit-scrollbar с webkit-transition?

Question

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

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

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

Answer 1

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

Answer 2

Вы все еще можете применить свой переход, установив -webkit-scrollbar-thumb background-color на 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;
}

Answer 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;
  }
}