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

76

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

css webkit pseudo-element

— Mrtsherman
source

101

你的想法是正确的。但是，div ::-webkit-scrollbar后面带有空格的表示法div实际上与div *::-webkit-scrollbar;相同。这个选择器的意思是“里面任何元素的滚动条<div>”。使用div::-webkit-scrollbar。

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

— 杜里
source

1

注意不要在div和::-webkit之间放置空格。这花了我一段时间来知道为什么它不起作用，问题是空格。

— Mohammed Noureldin

37

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

不知何故.foo::-webkit，但我发现那div.foo::-webkit行得通！那些## $$ * ##伪事物....

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

— 米歇尔·洛尔
source

2

太好了，谢谢你的提示。可能另一件事浪费了我一天的两个小时。

— mrtsherman 2012年

不再是真的

— Davi Lima

这可行！尝试了多种方法来使Webkit规则在容器类中工作，但在前面添加element标签以某种方式正确地应用了它。

— spiritworld

9

您还可以通过元素的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/

— 普拉蒂克·帕特尔（Pratik Patel）
source

您也可以将其应用于班级名称吗？

— URL87