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

我是新增以双冒号为前缀的伪元素。我遇到了一篇博客文章，讨论使用某些仅限webkit的CSS的滚动条样式。伪元素CSS可以应用于单个元素吗？将webkit滚动条样式应用到指定元素

/* 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/

来源

2011-10-12 mrtsherman

你的想法是正确的。然而，div之后的空格符号div ::-webkit-scrollbar实际上与div *::-webkit-scrollbar相同;此选择器意味着“<div>内的任何元素的滚动条”。使用div::-webkit-scrollbar。在http://jsfiddle.net/4xMUB/2/

来源

2011-10-12 17:22:04 duri

捂脸。谢谢。 – mrtsherman

Devstreak看到这个例子https://codepen.io/devstreak/pen/dMYgeO – talentedaamer

小心不要把div和::之间的空格 - webkit ..这花了我一些时间来知道为什么这不起作用，问题是白色空间。 –

我想用一个类选择使用自定义滚动条

观看演示。

不知何故.foo::-webkit不起作用，但我想到div.foo::-webkit确实有效！这些## $$ * ##伪的东西....

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

来源

2012-05-22 06:09:06

很酷，谢谢你的提示。也许另一件事会浪费我另一天两个小时的时间。 – mrtsherman

不是真的 –

他们都不工作。 –

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

来源

2014-12-18 05:57:59

你能否将它应用于类名？ – URL87

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

回答

相关问题