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

Question

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

在这个小提琴中,我想自定义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/