web-dev-qa-db-ja.com

指定された要素にWebkitスクロールバースタイルを適用します

二重コロンのプレフィックスが付いた擬似要素は初めてです。 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/

csswebkitpseudo-element
62
mrtsherman

あなたの考えは正しかった。ただし、divの後にスペースがあるdiv ::-webkit-scrollbarという表記は、実際にはdiv *::-webkit-scrollbarと同じです。このセレクタは、「<div>」内の任意の要素のスクロールバーを意味します。 div::-webkit-scrollbarを使用します。

http://jsfiddle.net/4xMUB/2/ のデモを参照してください

85
duri

カスタムスクロールバーを使用するためにクラスセレクタを使用したい。

どういうわけか.foo::-webkitは動作しませんが、div.foo::-webkit動作します！それらの## $$ * ##擬似物....

http://jsfiddle.net/QcqBM/16/ を参照してください

29
Michel Löhr

また、要素のIDによってこれらのルールを適用することもできます。 divのスクロールバーのスタイルを「myDivId」というIDにする必要があるとします。その後、次のことができます。これにより、さまざまな要素のスクロールバーにさまざまなスタイルを使用できます。

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

7
Pratik Patel