CSSスクロールバースタイル設定の実装

Webkit スクロールバー スタイルのリセット

1. スクロールバーには、スクロールバー ボタンとトラックが含まれています。トラックはさらにトラックピースとサムに分割されます。トレースピースは親指の上部と下部です。
2. スクロールバーの角は水平角と垂直角の交点です
3. resizeは、スクロールバーの交差点にある要素をドラッグしてサイズ変更するための小さなコントロールを設定するために使用されます。

構成構造図は以下のとおりです。

スクロール バーのカスタム スタイルが見つかると、ブラウザーのデフォルトのスタイル設定は無効になり、CSS で定義されたスタイルのみが使用されます。つまり、スクロールバー ボタンまたはスクロールバー トラックに対してのみ値を設定することはできません。

-webkit-scrollbar /* スクロールバー全体。リセット時に設定する必要があります*/
-webkit-scrollbar-button /* スクロールバートラックの両端にあるボタン*/
-webkit-scrollbar-track /* スクロールバー トラック (サムとトレースピースを含む) */
-webkit-scrollbar-track-piece /* トラックの中央部分と下部部分の上部と下部 (左と右) の部分 */
-webkit-scrollbar-thumb /*スクロールバー内の小さな四角*/
-webkit-scrollbar-corner /* 垂直と水平の交差角度 */
-webkit-resize // スクロールバーの交差点にある、要素をドラッグしてサイズ変更するための小さなコントロール*/

以下の疑似クラスと組み合わせて設定できます (スクロール バーはオペレーティング システムのブラウザーによって異なる場合があるため、以下の疑似クラスに従って設定できます)。

• :水平 水平トラック、トラックピース、サム
• :vertica 垂直トラック、トラックピース、サム
• :上と左のボタンの場合は減算ボタン、上または左の場合はトラックピース
• :下と右のボタン用の増分ボタン、下と右のトラックピース
• :start ボタンとトラックピースに適用され、オブジェクト（ボタンまたはトレースピース）がスライダーの前に配置されているかどうかを示します。
• :end ボタンとトラックピースに適用されます。オブジェクト（ボタンまたはトレースピース）がスライダーの後ろに配置されているかどうかに関係なく適用されます。
• :double-buttonはボタンとトラックピースに適用されます。トラックの終わりがボタンのペアであるかどうか
• :single-buttonはボタンとトラックピースに適用されます。トラックの終わりがボタンであるかどうか
• :no-button はトラックピースに適用されます。トラックの最後にボタンはありません。
• :corner-present は、スクロールバーの角が存在するかどうかに関係なく、すべてのスクロールバーに適用されます。
• :window-inactive は、フォーカスがウィンドウ上にない場合、スクロールバー領域を含むすべてのスクロールバーに適用されます。
• :enabled、:disabled、:hover、:active疑似クラスも適用される

IEでは、スクロールバーの色のみを変更できます。

scrollbar-arrow-color:#f2f2f3; /*上下矢印*/
scrollbar-track-color /*下部の背景色*/
scrollbar-face-color /*スクロールバーの前景色、つまみに対応*/
scrollbar-shadow-color /*スクロールバーの端の色、サムネイルの境界線*/
scrollbar-highlight-color /*スクロールバーの全体的な色*/
scrollbar-base-color /* スクロールバーの基本色*/

参考文献

スクロールバーのスタイル設定 | Webkit

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。