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

我可以看到,有几个理由说明为什么这不起作用.

你不能设置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

}