スクロールバーのスタイルを設定するための CSS サンプルコード

スクロールバーのスタイルを設定するための CSS サンプルコード

スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。

•::-webkit-scrollbar スクロールバー全体
•::-webkit-scrollbar-thumb スクロールバー内の小さな四角形は、上下(または、垂直スクロールバーか水平スクロールバーかに応じて左右)に移動できます。
•::-webkit-scrollbar-track スクロールバーのトラック(内部にThumbを含む)
•::-webkit-scrollbar-button スクロールバー トラックの両端にあるボタンをクリックすると、小さな四角形の位置を微調整できます。
•::-webkit-scrollbar-track-piece 内側のトラック、スクロールバーの中央部分(削除)
•::-webkit-scrollbar-corner 2つのスクロールバーが交わる角
•::-webkit-resizer 2つのスクロールバーの交差点にある小さなコントロールで、ドラッグして要素のサイズを変更します。

/*水平スクロールバーと垂直スクロールバーのサイズに応じて、スクロールバーの高さと幅、および背景の高さと幅を定義します*/
::-webkit-スクロールバー
{
    幅: 16px;
    高さ: 16px;
    背景色: #F5F5F5;
}
/*スクロールバートラックの内側の影と丸い角を定義します*/
::-webkit-スクロールバー-トラック
{
    -webkit-box-shadow: インセット 0 0 6px rgba(0,0,0,0.3);
    境界線の半径: 10px;
    背景色: #F5F5F5;
}
/*スライダーの内側の影と丸い角を定義します*/
::-webkit-スクロールバー-サムネイル
{
    境界線の半径: 10px;
    -webkit-box-shadow: インセット 0 0 6px rgba(0,0,0,.3);
    背景色: #555;
}

詳細設定

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

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

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

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

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

:水平
//horizo​​ntal疑似クラスは、任意の水平スクロールバーに適用されます: vertical
//垂直疑似クラスは、垂直スクロールバーに適用されます: 減分
// 減分疑似クラスはボタンとトラック ピースに適用されます。減少を表すボタンまたはトラックフラグメント。たとえば、領域を上または右に移動できる領域またはボタンなど: 増加
// 増分疑似クラスはボタンとトラック ピースに適用されます。領域を下または左に移動できる領域またはボタンなどの増分ボタンまたはトラックフラグメントを示します: start
//開始疑似クラスはボタンとトラックピースに適用されます。オブジェクト(ボタントラックフラグメント)がスライダーの前に配置されているかどうかを示します: end
//end 疑似クラスはボタンとトラック ピースに適用されます。オブジェクト(ボタントラックフラグメント)がスライダーの後ろに配置されているかどうかを示します:ダブルボタン
//ダブルボタン疑似クラスは、ボタンとトラックピースの両方に適用されます。トラックがボタンのペアで終了するかどうかを決定します。つまり、軌道上の破片は一対のボタンの隣にあるのです。
:シングルボタン
// シングルボタン疑似クラスは、ボタンとトラックピースの両方に適用されます。トラックの終わりがボタンであるかどうかを決定します。つまり、軌道フラグメントは別のボタンの隣にあります。
:ボタンなし
no-button 疑似クラスは、トラックの最後にボタンがないことを示します。
:コーナープレゼント
//コーナー存在疑似クラスは、スクロール バーのコーナーが存在するかどうかを示します。
:ウィンドウ非アクティブ
//すべてのスクロール バーに適用可能で、ウィンドウにフォーカスがない場合にスクロール バーを含む領域を示します。
::-webkit-スクロールバー-トラックピース:開始{
/* スクロールバーの上部または左半分 */
}
::-webkit-スクロールバー-サムネイル:ウィンドウ非アクティブ{
/*フォーカスが現在のエリアスライダー状態にない場合*/
}
::-webkit-スクロールバーボタン:水平:減分:ホバー{
/*マウスが水平スクロールバーの下のボタン上にあるときの状態*/
}

要約する

上記は、エディターが紹介した CSS を使用してスクロール バーのスタイルを設定するサンプル コードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  HTML特殊文字の徹底分析

>>:  MySQL 8.0.23 のレプリケーション アーキテクチャにおけるスレーブ ノードの自動フェイルオーバー

推薦する

Vueは小さな検索機能を実装する

この記事の例では、検索機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な...

JavaScript でプロパティハイジャックを実装する方法 defineProperty

目次序文記述子getとsetの詳細な説明オブジェクトの属性の乗っ取りオブジェクトのすべてのプロパティ...

ディスクを破壊せずに Linux で dd コマンドを使用する方法

故障したストレージ ドライブからデータを救出する場合でも、アーカイブをリモート ストレージにバックア...

Nginx 環境での WordPress マルチサイト構成の詳細な説明

WordPress のマルチサイト機能を使用すると、1 つの WordPress プログラムをインス...

mysql order by in の文字順序の詳細な説明 (推奨)

//MySQL ステートメント SELECT * FROM `MyTable` WHERE `id...

Dockerコンテナの状態変換の実装

Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...

Vueは指定された日付間のカウントダウンを実装します

この記事では、指定された日付間のカウントダウンを実装するためのVueの具体的なコードを例として紹介し...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

Docker環境でJenkinsを設定すると、タスクをビルドするときにコンソールログに文字化けした中国語の文字が表示されます

目次1. 問題の説明: 2. Jenkins設定のトラブルシューティング3. コードログのエンコード...

海外の無料写真素材サイトベスト9

良い画像素材のウェブサイトを見つけるのは難しいです。特に無料です。良い写真には非常に目を引く視覚効果...

docker インストール後に hello-world を実行する問題を解決する

yumを使用してcentos7.3にDocker V1.13.1をインストールしましたしかし、doc...

Docker で lnmp をデプロイする詳細な手順

目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...

JavaScript における clientWidth、offsetWidth、scrollWidth の違い

1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element....

MySQLインスタンスクラッシュ事例の詳細な分析

[問題の説明]私たちの実稼働環境には、複数の MySQL サーバー (MySQL 5.6.21) の...

Linux 上で Python3.6 をコンパイルしてインストールするための詳細なチュートリアル

1. まず、公式ウェブサイト https://www.python.org/downloads/so...