CSSスクロールバーの色を設定する方法

方法: まず、「::-webkit-scrollbar-thumb」疑似クラス セレクターを使用してスクロール バー スライダーを選択し、次に、背景属性を通じてスクロール バーの色を設定します。構文形式は「:」です。 :-webkit-scrollbar-thumb" {背景:色の値;}"。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

現在のプロジェクトのほとんどでスクロール バーが使用されており、場合によってはシミュレートされたスクロール バーが使用されるため、スクロール バーの CSS も解決できるようになりました。

たとえば、NetEase メールボックスのスクロール バーは非常に見栄えがよく、CSS を使用して設定されており、Webkit ブラウザーです。図に示すように:

#これらの属性の使用方法とその意味を以下で説明します。

webkit配下のCSSはスクロールバーのプロパティを設定します

主に以下の7つのプロパティがあります

1. ::-webkit-scrollbar全体のスクロールバー部分、幅や色などを設定できます。

3. ::-webkit-scrollbar-button スクロールバーの両端のボタンです。

4. : :-webkit-scrollbar-track 外側のトラック

5、::-webkit-scrollbar-track-piece 内側のスクロール溝

##6、::-webkit-scrollbar-thumb ローリング スライダー

7,: :-webkit-scrollbar-corner Corner

##8, ::-webkit-resizer 右下隅のドラッグ ブロックのスタイルを定義します

次のように図内:

例:

/*滚动条样式*/
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
        width:4px;/*高宽分别对应横竖滚动条的尺寸*/
        height:4px;
}
.cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius:5px;
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        background:rgba(0,0,0,0.2);  /*设置滚动条颜色*/
}
.cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
        border-radius:0;
        background:rgba(0,0,0,0.1);
}

(学習ビデオ共有: css ビデオ チュートリアル

)

以上がCSSスクロールバーの色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。