スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webkit-scrollbar スクロールバー全体 /*水平スクロールバーと垂直スクロールバーのサイズに応じて、スクロールバーの高さと幅、および背景の高さと幅を定義します*/ ::-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 に変換できます。そうしないと、毎回複数の画像を読み込む必要があり、リクエストの数が増加します。 境界線、影、背景画像など、任意のオブジェクトを設定できます。作成されたスクロール バーは、オペレーティング システム自体の設定に従って、インタラクティブな動作を実行します。上記の疑似要素には、次の疑似クラスを適用できます。少し複雑です。書き方の詳細については、最初のデモを参照してください。そこにコメントもあります。 :水平 //horizontal疑似クラスは、任意の水平スクロールバーに適用されます: vertical //垂直疑似クラスは、垂直スクロールバーに適用されます: 減分 // 減分疑似クラスはボタンとトラック ピースに適用されます。減少を表すボタンまたはトラックフラグメント。たとえば、領域を上または右に移動できる領域またはボタンなど: 増加 // 増分疑似クラスはボタンとトラック ピースに適用されます。領域を下または左に移動できる領域またはボタンなどの増分ボタンまたはトラックフラグメントを示します: start //開始疑似クラスはボタンとトラックピースに適用されます。オブジェクト(ボタントラックフラグメント)がスライダーの前に配置されているかどうかを示します: end //end 疑似クラスはボタンとトラック ピースに適用されます。オブジェクト(ボタントラックフラグメント)がスライダーの後ろに配置されているかどうかを示します:ダブルボタン //ダブルボタン疑似クラスは、ボタンとトラックピースの両方に適用されます。トラックがボタンのペアで終了するかどうかを決定します。つまり、軌道上の破片は一対のボタンの隣にあるのです。 :シングルボタン // シングルボタン疑似クラスは、ボタンとトラックピースの両方に適用されます。トラックの終わりがボタンであるかどうかを決定します。つまり、軌道フラグメントは別のボタンの隣にあります。 :ボタンなし no-button 疑似クラスは、トラックの最後にボタンがないことを示します。 :コーナープレゼント //コーナー存在疑似クラスは、スクロール バーのコーナーが存在するかどうかを示します。 :ウィンドウ非アクティブ //すべてのスクロール バーに適用可能で、ウィンドウにフォーカスがない場合にスクロール バーを含む領域を示します。 ::-webkit-スクロールバー-トラックピース:開始{ /* スクロールバーの上部または左半分 */ } ::-webkit-スクロールバー-サムネイル:ウィンドウ非アクティブ{ /*フォーカスが現在のエリアスライダー状態にない場合*/ } ::-webkit-スクロールバーボタン:水平:減分:ホバー{ /*マウスが水平スクロールバーの下のボタン上にあるときの状態*/ } 要約する 上記は、エディターが紹介した CSS を使用してスクロール バーのスタイルを設定するサンプル コードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: MySQL 8.0.23 のレプリケーション アーキテクチャにおけるスレーブ ノードの自動フェイルオーバー
この記事の例では、検索機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な...
目次序文記述子getとsetの詳細な説明オブジェクトの属性の乗っ取りオブジェクトのすべてのプロパティ...
故障したストレージ ドライブからデータを救出する場合でも、アーカイブをリモート ストレージにバックア...
WordPress のマルチサイト機能を使用すると、1 つの WordPress プログラムをインス...
//MySQL ステートメント SELECT * FROM `MyTable` WHERE `id...
Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...
この記事では、指定された日付間のカウントダウンを実装するためのVueの具体的なコードを例として紹介し...
この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...
目次1. 問題の説明: 2. Jenkins設定のトラブルシューティング3. コードログのエンコード...
良い画像素材のウェブサイトを見つけるのは難しいです。特に無料です。良い写真には非常に目を引く視覚効果...
yumを使用してcentos7.3にDocker V1.13.1をインストールしましたしかし、doc...
目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...
1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element....
[問題の説明]私たちの実稼働環境には、複数の MySQL サーバー (MySQL 5.6.21) の...
1. まず、公式ウェブサイト https://www.python.org/downloads/so...