スクロールバーのスタイルを設定するための 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 のレプリケーション アーキテクチャにおけるスレーブ ノードの自動フェイルオーバー

推薦する

MySQL トランザクション自動コミット自動コミット操作

MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...

MySQLのバッファプールの詳細な説明

MySQL のデータはディスクに書き込む必要があることは誰もが知っています。ディスクの読み取りと書き...

Linux crontab コマンドの使用

1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...

Dockerイメージの圧縮と最適化操作

Docker が今日非常に人気がある理由は、主にその軽量性、迅速な展開、およびリソースの利用にありま...

史上最も便利な Zookeeper サーバーの構築方法 (推奨)

ZooKeeperとはZooKeeper は、分散アプリケーションに効率的で可用性の高い分散調整サ...

Nginx で何ができるかの包括的な分析

序文この記事は、サードパーティのモジュールをロードせずにNginxで処理できることのみに焦点を当てて...

RHEL8 /CentOS8 でマルチノード Elastic Stack クラスターを構築する方法

一般的に ELK スタックとして知られる Elastic スタックは、Elasticsearch、L...

RedisとMySQLの違いを簡単に説明してください

MySQL はディスクに保存される永続的なストレージであり、取得には一定の IO が伴うことはご存じ...

Linux システムファイル共有 samba 設定チュートリアル

目次sambaをアンインストールしてインストールする新しい共有パスを作成し、権限を設定するSamba...

MySQL分離の使用手順を読む

現在のトランザクションはどの履歴バージョンを読み取ることができますか?読み取りビューは、トランザクシ...

Vue Element-ui テーブルはツリー構造テーブルを実現します

この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...

MySQL 無料インストール版 (zip) のインストールと設定の詳細なチュートリアル

この記事では、MySQL無料インストール版(zip)のインストールと設定のチュートリアルを参考までに...

ウェブサイト上のWeiboコンポーネントの再設計の詳細な紹介(写真とテキスト)

前面に書かれたWeibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに ...

Ant Design Pro ログイン機能にグラフィック検証コード コンポーネントを統合する方法

序文:この記事では、Ant Design Proログイン機能にグラフィック検証コードコンポーネントを...

Linux には make コマンドがありません (make: *** ターゲットが指定されておらず、makefile または make コマンドのインストール方法が見つかりません)

知らせ! ! !この状況は、実際には仮想マシンのインストール中に回避できます。次回仮想マシンをテスト...