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

この記事は主にCSS設定スクロールバースタイルのサンプルコードを紹介しています。非常に優れており、必要な方は参考にしてください。

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

•: :-webkit-scrollbar スクロール バーの不可欠な部分

•::-webkit-scrollbar-thumb スクロール バー内の小さな四角は上下 (または垂直かどうかに応じて左右) に移動できます。スクロール バーまたは水平スクロール バー)
•::-webkit-scrollbar-track スクロール バー トラック (親指が内側にある)
•::-webkit-scrollbar-button スクロール バー トラックの両端にあるボタンを使用すると、細かい設定ができます。 -小さな四角をクリックして位置を調整します。
•::-webkit-scrollbar-track-piece 内側のトラック、スクロール バーの中央部分 (削除)
•::-webkit-scrollbar-corner コーナー、つまり 2 つのスクロール バーの交差点
•::-webkit -resizer は、ドラッグして要素のサイズを調整するための 2 つのスクロール バーの交点にある小さなコントロールです

詳細設定

スクロール バーを定義するには、疑似要素とでは、擬似要素とは何でしょうか? 疑似クラス: link、:focus、:hover に加えて、:nth-child、:last-child、:nth-last などの多くの疑似クラス セレクターが CSS3 に追加されています。 -of-type() 待機します。

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

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

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

りー

以上がスクロールバーのスタイルを設定するためのCSSサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。