如何为滚动条添加额外的悬停效果答案

【问题标题】：How to add a additional hover effect to scroll-bar如何为滚动条添加额外的悬停效果
【发布时间】：2015-07-30 22:36:31
【问题描述】：

在我的 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;}
}

请说明如何制作动画。特别感谢。

【问题讨论】：

我唯一能想到的就是无法为滚动条设置动画。我从未见过带有动画滚动条的网站，也看不出应该这样做的理由。但也许其他人对此了解更多。
等一下，-webkit-scrollbar-thumb 不会选择滚动条本身。您应该尝试将 -webkit-scrollbar 作为使用动画的元素。见参考here
@Lunaetic 我已经尝试过了，但它确实有效。
那么我相信不可能为您的滚动条设置动画/：
在另一个相同的问题中已经有了答案。 stackoverflow.com/a/69820772/9854149

标签： html css

【解决方案1】：

在我看来，这不起作用有几个原因。

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

您不能在:hover 上更改body::-webkit-scrollbar 的宽度。有或没有动画。

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

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

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

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
}

【讨论】：

您可以在悬停时更改滚动条的宽度。看我的回答

【解决方案2】：

这将改变宽度，不幸的是仍然不支持过渡。（这是在 sass 中）

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

    &:hover {
      width: 4px;
    }
  }

【讨论】：