スクロール バーのスタイルを設定するための 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 のレプリケーション アーキテクチャにおけるスレーブ ノードの自動フェイルオーバー
MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...
MySQL のデータはディスクに書き込む必要があることは誰もが知っています。ディスクの読み取りと書き...
1. コマンドの紹介contab (cron テーブル) コマンドは、Windows のスケジュール...
Docker が今日非常に人気がある理由は、主にその軽量性、迅速な展開、およびリソースの利用にありま...
ZooKeeperとはZooKeeper は、分散アプリケーションに効率的で可用性の高い分散調整サ...
序文この記事は、サードパーティのモジュールをロードせずにNginxで処理できることのみに焦点を当てて...
一般的に ELK スタックとして知られる Elastic スタックは、Elasticsearch、L...
MySQL はディスクに保存される永続的なストレージであり、取得には一定の IO が伴うことはご存じ...
目次sambaをアンインストールしてインストールする新しい共有パスを作成し、権限を設定するSamba...
現在のトランザクションはどの履歴バージョンを読み取ることができますか?読み取りビューは、トランザクシ...
この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...
この記事では、MySQL無料インストール版(zip)のインストールと設定のチュートリアルを参考までに...
前面に書かれたWeibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに ...
序文:この記事では、Ant Design Proログイン機能にグラフィック検証コードコンポーネントを...
知らせ! ! !この状況は、実際には仮想マシンのインストール中に回避できます。次回仮想マシンをテスト...