將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滾動條樣式應用到指定元素

回答

相關問題