将Webkit滚动条样式应用于指定元素

Question

我是以双冒号为前缀的伪元素的新手。我遇到了一篇博客文章，讨论仅使用某些Webkit 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;
}

在此小提琴中，我想使div的滚动条自定义，但主窗口的滚动条保持默认状态。

http://jsfiddle.net/mrtsherman/4xMUB/1/

Answer 1

您的想法是正确的。但是，符号div ::-webkit-scrollbar在div后面有一个空格，实际上与div *::-webkit-scrollbar相同；该选择器的意思是“ <div>中任何元素的滚动条”。使用div::-webkit-scrollbar。

请参见http://jsfiddle.net/4xMUB/2/的演示

Answer 2

我想使用类选择器来使用自定义滚动条。

以某种方式.foo::-webkit不起作用，但是我发现div.foo::-webkit起作用了！那些## $$ * ##伪事物....

请参见http://jsfiddle.net/QcqBM/16/

Answer 3

您还可以通过元素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); 
}

http://jsfiddle.net/QcqBM/516/