4

スクロールバーのスタイルを変更したいのですが、これはcssの下で使用しましたが、ページ全体ではなくページ上の特定のdivに使用したいです。div クラスまたは ID を使用してカスタマイズするにはどうすればよいですか

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #A8A8A8; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}
4

3 に答える 3

0

はい、要素IDを使用してこれを実現できます。

これを試して、

#div1::-webkit-scrollbar {
   width: 12px;
}

#div1::-webkit-scrollbar-track  {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
   -webkit-border-radius: 10px;
   border-radius: 10px;
}

 #div1::-webkit-scrollbar-thumb  {
   -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #A8A8A8; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 }

#div1::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}​

それがうまくいくことを願っています...

ライブデモ

注：Chromeでは正常に機能していると思います。しかし、ff＆すなわちそれは機能していません。

于 2012-11-05T10:21:34.250 に答える
0

カスタム スクロールバーが本当に必要な場合は、Javascript と CSS で使用できるいくつかのハックがあります - CSS トリックに関する素敵な記事。

jQueryプラグインもたくさんあります。私が使用したものはLazybarsと呼ばれるもので、実装は非常に簡単です。

お役に立てれば

于 2014-02-12T22:39:54.017 に答える