CSS3 カスタム スクロール バー スタイル: webkit-scrollbar の詳細な説明

ブラウザーに付属の元のスクロール バーが非常に見苦しいと思ったことはありますか? 同時に、多くの Web サイトのカスタム スクロール バーが、Chrome 32.0 開発ボードでさえ放棄されているのを見たことがあるでしょう。元のスクロール バーははるかに美しいです。では、WebKit ブラウザはスクロール バーをどのようにカスタマイズするのでしょうか?

前書き

Webkit は、オーバーフロー属性、リスト ボックス、ドロップダウン メニュー、テキストエリア スクロール バーのカスタム スタイルを備えた領域をサポートしているため、非常に便利です。もちろん、現時点ではすべてのブラウザと互換性のあるスクロール バー スタイルはありません。

デモ

これら 2 つのスクロール バーのデモを見てみましょう:demo1 (画像バージョン)、demo2 (純粋な CSS3 バージョン)

スクロール バーの構成

• ::-webkit-scrollbarスクロール バー

• ::-webkit-scrollbar-thumb スクロール バーの小さな四角は上下 (垂直スクロール バーか水平スクロール バーかに応じて左右) に移動できます

• ::-webkit-scrollbar -track スクロール バー トラック (親指が内側にある)

• ::-webkit-scrollbar-button スクロール バー トラックの両端にあるボタンを使用すると、小さなボタンの位置を微調整できますクリックすると正方形になります。

• ::-webkit-scrollbar-track-piece 内側のトラック、スクロール バーの中央部分 (削除されました)

• ::-webkit-scrollbar-corner コーナー、つまり、 2 つのスクロール バー

• ::-webkit-resizer 2 つのスクロール バーの交点をドラッグして要素のサイズを調整するために使用される小さなコントロール

簡易バージョン

ここでは詳細なコードは投稿しません。デモでソース コードを表示できます。特定のスタイルの設定を探します。デモ2の2番目のスクロールバーのスタイルを見てみましょう

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
	width: 16px;
	height: 16px;
	background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

詳細設定

スクロールバーを定義するには、擬似要素や擬似クラスを使用することになります。 では、擬似要素や擬似クラスとは何でしょうか。

疑似クラス :link、:focus、:hover についてはよく知っている必要があります。さらに、:nth-child、:last-child、:nth など、多くの疑似クラス セレクター が CSS3 に追加されています。 -last-of-type ()wait。

以前に CSS の疑似要素を見たことがあるでしょう: :first-line、:first-letter、:before、:after。その後、CSS3 では擬似要素が調整され、前の要素に「:」が追加され、「::first-letter,::first-line,::before,::after」になりました。さらに、CSS3では「::selection」も追加されています。 2 つの「::」と 1 つの「:」は主に CSS3 で疑似クラスと疑似要素を区別するために使用されます。

Webkit の擬似クラスと擬似要素の実装は非常に強力です。スクロール バーはページ要素として定義でき、グラデーション、角丸、RGBa などの高度な CSS3 属性と組み合わせることができます。いくつかの場所で画像を使用する必要がある場合は、画像を Base64 に変換することもできます。そうしないと、毎回複数の画像を読み込む必要があり、リクエストの数が増加します。

境界線、影、背景画像など、あらゆるオブジェクトを設定できます。作成されたスクロール バーは、オペレーティング システム自体の設定に従ってインタラクティブな動作を完了します。以下の疑似クラスを上記の疑似要素に適用できます。少し複雑な書き方については、最初のデモを参照してください。

以上がCSS3 カスタム スクロール バー スタイル: webkit-scrollbar の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。