我可以看到,有几个理由说明为什么这不起作用.
你不能设置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值.但滚动条伪元素上的任何动画都不会播放.
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
}