1

カスタム スクロール バーを含むページを作成しました。コードを適用すると、本文のすべてのスクロール バーとブラウザー ウィンドウのスクロール バーがコードに反応しました。しかし、私が望んでいたのは、ウィンドウのスクロールバーではなく、本体のスクロールバーのみをカスタマイズすることです。

どうすればこれを変更できますか? どうもありがとう。これがWebkitコードです。

::-webkit-scrollbar .right {    
    width: 7px;        
}    

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

/* Handle */    
::-webkit-scrollbar-thumb .right{    
     -webkit-border-radius: 10px;       
     border-radius: 10px;      
     /*background: rgba(255,0,0,0.8); */    
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);     
}    

::-webkit-scrollbar-thumb:hover {    
     background-color:#028eff;    
}
4

1 に答える 1

1

デモ: http://jsfiddle.net/2cpSW/2/ (Webkit のみ)

より制限的なセレクターを使用できます。

/* just for testing */
div.custom-scroll {
    overflow: auto;
    height: 200px;
}

/* modified selectors from question */

.custom-scroll::-webkit-scrollbar {
    width: 7px;
}
.custom-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.custom-scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color:#028eff;
}

( ) でこれを実行しようとしていたようです::-webkit-scrollbar .right。おそらく、あなたがする必要があるのは、セレクターを修正することだけですか? ( .right::-webkit-scrollbar)。

詳細:疑似要素セレクター

于 2013-04-25T11:53:58.983 に答える