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-scrollbar上: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
}

Answer 2

这将改变宽度，遗憾的是仍然不支持转换。（这是sass）

 ::-webkit-scrollbar {
    width: 2px;
    background-color: #F5F5F5;

    &:hover {
      width: 4px;
    }
  }

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

2 个答案: