在特定状态下设置 webkit 滚动条的样式
我希望我的 WebKit 滚动条 在其容器处于盘旋在上空。我希望整个滚动条都亮起来。
我想这样的东西可以解决问题（但事实并非如此）：
.scroller:hover::-webkit-scrollbar {
background: green;
}
我以相同的方式设置滚动条的样式：在 .scroller 上，而不是在全局上。 （有效：.scroller::-webkit-scrollbar）我想要溢出的 div 特殊，而不是文档。
另一个（相关）问题：将鼠标悬停在滚动条上时点亮拇指。这不起作用：
.scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb
I'd like my WebKit scrollbars to have a different color when its container is hovered over. I want the entire scrollbar to light up.
I was thinking something like this would do the trick (but it doesn't):
.scroller:hover::-webkit-scrollbar {
background: green;
}
I've styled the scrollbars the same way: on .scroller, not globally. (That works: .scroller::-webkit-scrollbar) I want the overflowed divs special, not the document.
Another (related) problem: light up the thumb when hovering over the scrollbar. This doesn't work:
.scroller::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
使用纯 CSS 可以做到这一点，至少在 Chrome 版本 29 中是可以的。
http://jsfiddle.net/eR9SP/
要在其容器（在本例中为
.scroller）悬停时设置滚动条的样式，请使用：此外，您可以使用以下命令在悬停或活动（单击）时设置滚动条缩略图本身的样式：
This is possible using pure CSS, at least with Chrome version 29.
http://jsfiddle.net/eR9SP/
To style the scrollbar when its container (in this case
.scroller) is hovered over, use:Additionally, you can style the scrollbar thumb itself when it's hovered over or active (being clicked) using the following:
改变背景颜色对我来说效果很好。
http://jsfiddle.net/QcqBM/1
您确定您的 CSS 调用没有其他问题吗？
Changing the background color works just fine for me.
http://jsfiddle.net/QcqBM/1
Are you sure there isn't something else wrong with your CSS call?
有一种非常简单的方法可以做到这一点 - 只需使用 class 在 CSS 中添加 webkit 滚动条，然后使用元素上的 classList.remove 将其从元素中删除。
更多详细信息 这里
There's a very easy way to do it -- just add the webkit scrollbar in the CSS using class, then remove it from your element using classList.remove on your element.
A few more details here