Использовать переход на:: - webkit-scrollbar?

Ответ 1

Довольно легко добиться использования техники Mari M 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;
  }
}

Ответ 2

Здесь другая идея, основанная на ответах здесь. Вы можете использовать цвет вместо background-color и затем box-shadow для раскрашивания большого пальца (вы можете даже взломать text-shadow для удовольствия, как я сделал, очевидно, не готовый к производству подход, но вы можете просто переопределить цвет в дочернем контейнере):

https://codepen.io/waterplea/pen/dVMopv

*::-webkit-scrollbar-thumb {        
  box-shadow: inset 0 0 0 10px;
}

div {
  overflow: auto;
  color: rgba(0, 0, 0, 0);
  transition: color .3s ease;
}

div:hover {
  color: rgba(0, 0, 0, 0.3);
}

Ответ 3

Короткий ответ: Нет, нельзя использовать transition на ::-webkit-scrollbar

Длинный ответ: Есть средства для достижения подобного эффекта полностью в CSS.

Объяснение:

• Нам нужно создать внешний контейнер, который будет прокручиваться. Затем мы хотим создать внутренний контейнер.
• Внешний контейнер будет иметь свойство background-color. Это свойство будет соответствовать цвету, который мы хотим переместить для полосы прокрутки.
• Внутренний контейнер будет соответствовать высоте внешнего контейнера и будет иметь background-color, который маскирует внешний контейнер.
• Полоса прокрутки background-color наследует внешний контейнер.
• Свойство transition будет применено к background-color внешнего контейнера.

Основным недостатком здесь является то, что вам нужно сделать маскировку. Это может быть немного хлопот, если ваш фон не является сплошным цветом, поскольку внутренний контейнер, скорее всего, будет соответствовать. Если это не волноваться, это сработает для вас. Здесь код, чтобы собрать все вместе для страницы с компонентом с горизонтальной прокруткой.

HTML

<div id="container-outer">
    <div id="container-inner">
        <!-- Content goes here -->
    </div>
</div>

CSS

    /* Scrollbar */
    ::-webkit-scrollbar {
        border: 0;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0);
    }
    ::-webkit-scrollbar-thumb {
        background-color: inherit; /* Inherits from outer container */
        border-radius: 20px;
    }

    /* Container */
    #container-outer {
        overflow-y: hidden;
        overflow-x: scroll; /* Horizontal-only scrolling */
        height: 400px;
        background-color: white; /* Initial color of the scrollbar */
        transition: background-color 200ms;
    }
    #container-outer:hover {
        background-color: red; /* Hover state color of the scrollbar */
    }
    #container-inner {
        background-color: white; /* Masks outer container */
        font-size: 0;
        height: inherit; /* Inherits from outer container */
        width: 10000px; /* Set to see the scrolling effect */
    }

Примечания:

• Это должно быть очевидно, но это решение Webkit. Вопрос был конкретно о Webkit, а не о чем-либо другом, поэтому этот ответ касается только Webkit.
• В вашем внешнем контейнере, вероятно, понадобится max-width, который будет соответствовать вашему внутреннему контейнеру width, иначе вы можете увидеть некоторую странность на чрезвычайно больших дисплеях. Это крайний случай, когда ширина браузера больше ширины содержимого прокрутки по горизонтали. Предполагается, что вы используете горизонтальную прокрутку, как это делает код примера.
• В большинстве случаев стили наведения не работают на мобильных устройствах. Это проблема, связанная с огромным проникновением на рынок мобильных браузеров Webkit. Учитывайте это перед использованием этого решения.

Ответ 4

Адаптировано из @brillout answer, если мы переместим border-color вместо background-color, мы можем избежать использования background-clip: text, что оставляет некоторые фрагменты позади, если у вас есть вложенный текст.

Полное объяснение:

1. Поместите ваш контент в некоторый div обертки, а затем добавьте переход к border-color на вашей обертке, чтобы изменить цвет при наведении.
2. Добавьте рамку вставки на полосу прокрутки и установите ширину, достаточную для заполнения всего элемента.
3. Установите border-color: inherit на своей полосе прокрутки.

Теперь, когда мы наведем курсор на обертку, цвет границы изменится. Оболочка не имеет границы, поэтому мы ничего не видим. Однако полоса прокрутки наследует этот цвет, поэтому цвет полосы прокрутки изменяется.

Вот самый важный код. Полный пример доступен в этой скрипке и во фрагменте ниже.

#scroller {
  /* fill parent */
  display: block;
  width: 100%;
  height: 100%;

  /* set to some transparent color */
  border-color: rgba(0, 0, 0, 0.0);
  /* here we make the color transition */
  transition: border-color 0.75s linear;
  /* make this element do the scrolling */
  overflow: auto;
}

#scroller:hover {
  /* the color we want the scrollbar on hover */
  border-color: rgba(0, 0, 0, 0.1);
}

#scroller::-webkit-scrollbar,
#scroller::-webkit-scrollbar-thumb,
#scroller::-webkit-scrollbar-corner {
  /* add border to act as background-color */
  border-right-style: inset;
  /* sum viewport dimensions to guarantee border will fill scrollbar */
  border-right-width: calc(100vw + 100vh);
  /* inherit border-color to inherit transitions */
  border-color: inherit;
}

<div id="scroller">...</div>

body {
  background: whitesmoke;
}

#wrapper {
  width: 150px;
  height: 150px;
  margin: 2em auto;
  box-shadow: 0 0 15px 5px #ccc;
}

#scroller {
  /* fill parent */
  display: block;
  width: 100%;
  height: 100%;
}

#content {
  display: block;
  width: 300px;
  height: auto;
  padding: 5px;
}

#scroller {
  /* The background-color of the scrollbar cannot be transitioned.
     To work around this, we set and transition the property
     of the wrapper and just set the scrollbar to inherit its
     value. Now, when the the wrapper transitions that property,
     so does the scrollbar. However, if we set a background-color,
     this color shows up in the wrapper as well as the scrollbar.
     Solution: we transition the border-color and add a border-right
     to the scrollbar that is as large as the viewport. */
  border-color: rgba(0, 0, 0, 0.0);
  transition: border-color 0.75s linear;
  /* make this element do the scrolling */
  overflow: auto;
}

#scroller:hover {
  border-color: rgba(0, 0, 0, 0.1);
  transition: border-color 0.125s linear;
}

#scroller::-webkit-scrollbar,
#scroller::-webkit-scrollbar-thumb,
#scroller::-webkit-scrollbar-corner {
  /* add border to act as background-color */
  border-right-style: inset;
  /* sum viewport dimensions to guarantee border will fill scrollbar */
  border-right-width: calc(100vw + 100vh);
  /* inherit border-color to inherit transitions */
  border-color: inherit;
}

#scroller::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

#scroller::-webkit-scrollbar-thumb {
  border-color: rgba(0, 0, 0, 0.1);
  /* uncomment this to hide the thumb when not hovered */
  /* border-color: inherit; */
}

#scroller::-webkit-scrollbar-thumb:hover {
  border-color: rgba(0, 0, 0, 0.15);
}

#scroller::-webkit-scrollbar-thumb:active {
  border-color: rgba(0, 0, 0, 0.2);
}

<div id="wrapper">
  <div id="scroller">
    <div id="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium mi felis, pharetra ornare lorem pellentesque pulvinar. Donec varius condimentum nunc at mollis. Pellentesque posuere et quam eu tristique. Integer interdum enim non interdum mattis. Suspendisse gravida nibh enim, non efficitur lacus suscipit quis. Etiam pharetra libero auctor ultricies ornare. Duis dapibus semper semper. Nam sit amet lobortis arcu.

  Maecenas fermentum risus quis justo convallis, non ornare erat fringilla. Cras eleifend leo sapien, ac iaculis orci ultricies sed. Praesent ultrices accumsan risus, pharetra pharetra lorem dignissim id. Aenean laoreet fringilla eros, vel luctus eros luctus sed. Nullam fermentum massa sit amet arcu dictum, nec bibendum lectus porta. Duis pellentesque dui sed nisi ultricies, vitae feugiat dui accumsan. Nam sollicitudin, ex et viverra ultricies, justo metus porttitor quam, quis vestibulum nibh nisl eget leo.

  Integer luctus arcu et sapien accumsan fringilla. Integer mollis tellus vel imperdiet elementum. Ut consequat ac nibh ac sagittis. Duis neque purus, pellentesque nec erat id, pharetra ornare sapien. Etiam volutpat tincidunt nunc ac facilisis. Aenean sed purus pellentesque, vehicula mauris porta, fringilla nibh. Ut placerat, risus et congue rutrum, lorem arcu aliquet urna, sollicitudin venenatis lorem eros et diam. Aliquam sodales ex risus, ac vulputate ipsum porttitor vel. Pellentesque mattis nibh orci. Morbi turpis nulla, tincidunt vitae tincidunt in, sodales et arcu. Nam tincidunt orci id sapien venenatis porttitor ut eu ipsum. Curabitur turpis sapien, accumsan eget risus et, congue suscipit ligula.

  Maecenas felis quam, ultrices ac ornare nec, blandit at leo. Integer dapibus bibendum lectus. Donec pretium vehicula velit. Etiam eu cursus ligula. Nam rhoncus diam lacus, id tincidunt dui consequat id. Ut eget auctor massa, quis laoreet risus. Nunc blandit sapien non massa bibendum, ac auctor quam pellentesque. Quisque ultricies, est vitae pharetra hendrerit, elit enim interdum odio, eu malesuada nibh nulla a nisi. Ut quam tortor, feugiat sit amet malesuada eu, viverra in neque. Nullam lacinia justo sit amet porta interdum. Etiam enim orci, rutrum sit amet neque non, finibus elementum magna. Sed ac felis quis nunc fermentum suscipit.

  Ut aliquam placerat nulla eget aliquam. Phasellus sed purus mi. Morbi tincidunt est dictum, faucibus orci in, lobortis eros. Etiam sed viverra metus, non vehicula ex. Sed consectetur sodales felis, vel ultrices risus laoreet eget. Morbi ut eleifend lacus, ac accumsan risus. Donec iaculis ex nec ante efficitur vestibulum.
    </div>
  </div>
</div>

Ответ 5

Для стилизации полосы прокрутки вы можете сделать достаточно:

::-webkit-scrollbar {
    width: 18px;
    height: 20px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.70);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button{
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}

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

JSFiddle