Question

是否可以在webkit滚动条上使用转换？我试过了：

div#main::-webkit-scrollbar-thumb {
    background: rgba(255,204,102,0.25);
    -webkit-transition: background 1s;
    transition: background 1s;
}

div#main:hover::-webkit-scrollbar-thumb {
    background: rgba(255,204,102,1);
}

但它不起作用。或者是否可以创建类似的效果（没有javascript）？

Here is a jsfiddle showing the rgba transition problem

Answer 1

除了background-color: inherit;之外，使用Mari M＆＃39 -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;
  }
}

Answer 2

这是基于这里回复的另一个想法。您可以使用颜色代替背景颜色，然后使用框阴影来为拇指着色（您甚至可以像我一样破解文本阴影，显然不是生产就绪的方法，但您可以覆盖子容器中的颜色）：

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

Answer 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移动浏览器的巨大市场渗透率，这是一个问题。在使用此解决方案之前，请考虑到这一点。

Answer 4

改编自@brillout's answer，如果我们转换border-color而不是background-color，我们可以避免使用background-clip: text，如果您有任何嵌套文本，则会留下一些片段。

完整说明：

将您的内容放入包装器div中，然后在包装器上向border-color添加过渡，以在悬停时更改颜色。
在滚动条上添加插图边框，并将宽度设置为足够大以填充整个元素。
在滚动条上设置border-color: inherit。

现在，当我们将鼠标悬停在包装上时，边框颜色将过渡。包装程序没有边框，因此我们看不到任何情况。但是，滚动条继承了该颜色，因此滚动条颜色会更改。

这是最重要的代码。 this fiddle和下面的摘录中提供了完整的示例。

#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>

Answer 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

使用转换:: - webkit-scrollbar？

5 个答案: