CSS 将 webkit 滚动条样式应用于指定元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7743840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply webkit scrollbar style to specified element
提问by mrtsherman
I am new to pseudo-elements that are prefixed with a double colon. I came across a blog article discussing styling of scrollbars using some webkit only css. Can the pseudo-element CSS be applied to individual elements?
我不熟悉以双冒号为前缀的伪元素。我看到了一篇讨论使用一些 webkit only css 的滚动条样式的博客文章。伪元素 CSS 可以应用于单个元素吗？
/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
width: 12px;
}
/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
width: 12px;
}
In this fiddle, I would like to make the div's scrollbar customized, but the main window's scrollbar stay at the default.
在这个小提琴中，我想自定义 div 的滚动条，但主窗口的滚动条保持默认。
回答by duri
Your idea was correct. However, the notation div ::-webkit-scrollbarwith a space after divis actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.
你的想法是正确的。但是，div ::-webkit-scrollbar后面有空格的符号div实际上与div *::-webkit-scrollbar;相同。这个选择器的意思是“里面任何元素的滚动条<div>”。使用div::-webkit-scrollbar.
See demo at http://jsfiddle.net/4xMUB/2/
回答by Michel L?hr
I want to use a class selector for using a custom scrollbar.
我想使用类选择器来使用自定义滚动条。
Somehow .foo::-webkitdoesn't work, but I figured out that div.foo::-webkitdoes work! Those ##$$*## pseudo-things....
不知何故.foo::-webkit不起作用，但我发现它div.foo::-webkit确实有效！那些##$$*## 伪事物....
回答by Pratik Patel
You can also apply these rules by id of the element. Let's say scroll bar of a div has to be styled which has an id "myDivId". Then you can do following. This way you can use different styles for scroll bars of different elements.
您还可以通过元素的 id 应用这些规则。假设 div 的滚动条必须具有 id 为“myDivId”的样式。然后你可以进行以下操作。这样你就可以为不同元素的滚动条使用不同的样式。
#myDivId::-webkit-scrollbar {
width: 12px;
}
#myDivId::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
#myDivId::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
