在特定状态下样式化Webkit滚动条

Question

在特定状态下样式化Webkit滚动条

10

我希望当鼠标悬停在容器上时，我的 WebKit 滚动条显示不同的颜色。我想要整个滚动条都亮起来。

我认为这样做可能有用（但实际上并不行）：

.scroller:hover::-webkit-scrollbar {
  background: green;
}

我已经按照相同的方式样式化了滚动条：在.scroller上，而不是全局。这很有效：.scroller::-webkit-scrollbar。我想让溢出的

变得特别，而不是整个文档。

另一个（相关的）问题：当鼠标悬停在滚动条上时，突出显示滑块。这并不起作用：

.scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb

- Rudie

3个回答

7

对我来说，更改背景颜色完全没有问题。

http://jsfiddle.net/QcqBM/1

div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

你确定你的CSS调用没有其他问题吗？

- mrtsherman

嗯，是的...这差不多是我想要的：http://jsfiddle.net/rudiedirkx/QcqBM/2/ 那么其他相关问题呢？悬停在“滚动条”上以点亮“滚动条拇指”。（我有几次使用了“轨道”而不是“拇指”，我的错。） - Rudie

也许伪（滚动条）元素没有悬停状态...或者没有层次结构。那会很糟糕。 - Rudie

当我鼠标悬停在滑块上时，我也可以改变滑块的颜色 - http://jsfiddle.net/QcqBM/3/ - mrtsherman

那是在 .scroller:hover 上。我想要在 scrollbar:hover 上改变拇指颜色。但这需要一些层次结构：.scroller::scrollbar:hover ::thumb，但似乎不起作用。或者我又做错了吗？ - Rudie

抱歉，我现在终于明白了。我认为这是不可行的，因为伪元素属于父元素。它们彼此之间没有层次关系。你应该能够使用JavaScript使其工作。这里有一个使用jQuery获取你想要的效果的示例。http://jsfiddle.net/QcqBM/6/ - mrtsherman

可以使用纯CSS实现所有这些功能。（至少在Chrome 29版本中是这样的。）请参见我的答案：https://dev59.com/1V7Va4cB1Zd3GeqPLqNt#19171215 - Michael

0

有一种非常简单的方法可以做到这一点——只需在CSS中使用类添加webkit滚动条，然后使用classList.remove在您的元素上将其删除。

更多细节在这里

- AlexS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael · Accepted Answer

这是使用纯CSS实现的，至少在Chrome 29版本中可以。

http://jsfiddle.net/eR9SP/

要在容器（在这种情况下是.scroller）悬停时样式化滚动条，请使用：

.scroller:hover::-webkit-scrollbar { /* styles for scrollbar */ }
.scroller:hover::-webkit-scrollbar-thumb { /* styles for scrollbar thumb */ }
.scroller:hover::-webkit-scrollbar-track { /* styles for scrollbar track */ }

此外，您可以使用以下方式在滚动条拇指悬停或处于活动状态（被点击时）时对其进行样式化：

.scroller::-webkit-scrollbar-thumb:horizontal:hover,
.scroller::-webkit-scrollbar-thumb:vertical:hover { /* hover thumb styles */ }
.scroller::-webkit-scrollbar-thumb:horizontal:active,
.scroller::-webkit-scrollbar-thumb:vertical:active { /* active thumb styles */ }