如何向滚动条添加额外的悬停效果

Question

在我的CSS中,我改变了滚动条的样式,它看起来像

body::-webkit-scrollbar {
  width: 0.7em;
}
body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(154,165,159,0.5);
}
body::-webkit-scrollbar-thumb {
  background-color: #D0CACD;
  outline: 1px solid LightGrey;
  box-shadow: 7px 7px 50px grey;
}

有用.如果我添加悬停:

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

然后它也适用于我添加webkit动画,然后为什么它不起作用.添加webkit动画后,它看起来像:

body::-webkit-scrollbar-thumb:hover {
  background-color: #b8c0bc;
  -webkit-animation: scrollbig 1s; 
  animation: scrollbig 2s; 
}

动画无法播放.为什么？我正在使用谷歌浏览器.你还可以看到@keyframe动画代码:

@-webkit-keyframes scrollbig {
  from {width: 0.6em;}
  to {width: 0.9em;}
}

请告诉我们如何制作动画.特别感谢.

Answer 1

正如我所看到的，为什么这不起作用有几个原因。

不能设置宽度body::-webkit-scrollbar-thumb。它将始终与 相同body::-webkit-scrollbar。

您无法更改body::-webkit-scrollbaron的宽度:hover。有或没有动画。

body::-webkit-scrollbar {
    width: 0.7em;
}

body::-webkit-scrollbar:hover {
    width: 0.9em; // Will be ignored
}

将设置规则的from值keyframes。但是滚动条伪元素上的任何动画都不会播放。

body::-webkit-scrollbar-thumb {
    background: yellow; // Scroll thumb is yellow
}

body::-webkit-scrollbar-thumb:hover {
    -webkit-animation: scrollbig 1s;
}

// 0% = from, 100% = to
@-webkit-keyframes scrollbig {
    0% {background: red;} // Scroll thumb is red
    1% {background: green;} // Will be ignored
    100% {background: blue;} // Will be ignored
}

过渡也被忽略。

body::-webkit-scrollbar-thumb {
    background: yellow; // Scroll thumb is yellow
    transition: background 2s; // Will be ignored
}

body::-webkit-scrollbar-thumb:hover {
    background: red; // Scroll thumb is red
}