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

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 を応援していただければ幸いです。

<<:  Reactのコンテキストとプロパティの説明

>>:  HTML タイトルに二重引用符を追加する方法

推薦する

高品質なウェブページのデザイン方法 高品質なウェブページ(画像とテキスト)のデザイン経験

オープンプラットフォームの増加に伴い、そこから派生するさまざまなアプリケーションサービスも増加傾向に...

IDEA が docker を統合して springboot プロジェクトを展開するプロセス全体

目次1. IDEAはdockerプラグインをダウンロードします2. クラウドサーバーDocker 2...

mysql データベースの作成、ユーザーの追加、ユーザー認証の実用的な方法

1. MySQLデータベースを作成する1. データベース構文を作成する --「testdb」という名...

jQuery でダイナミックなパーティクル効果を実現

この記事では、動的なパーティクル効果を実現するためのjQueryの具体的なコードを参考までに紹介しま...

ローカル画像サーバーのNginx構成の実装

目次1. Nginx の紹介2. 画像サーバーの構築1. Nginx の紹介Nginx はリバース ...

vue.jsは画像のURLに従って画像をダウンロードします

最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...

CSS3で実装されたサムネイルホバー効果

成果を達成する実装コードhtml <ヘッダー> <h1><em>...

MacにMySQLデータベースをインストールする方法を教えます

Mac 用 MySQL をダウンロード: https://downloads.mysql.com/a...

Linux で open-vswitch をインストールおよびアンインストールする方法

1. ソースコードからovsをコンパイルしてインストールします。依存関係をインストールします: # ...

JavaScript はドラッグ可能なモーダルボックスを実装します

この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...

JSONオブジェクトのキーを置き換える最良の方法

JSON (JavaScript Object Notation、JS Object Notatio...

dockerでredis5.0.3をインストールする方法

1. 公式5.0.3イメージを取得する [root@localhost ~]# docker pul...

詳細なLinuxインストールチュートリアル

(Win7 システム) VMware 仮想マシンのインストール チュートリアルVMware は仮想マ...

VMware ESXi 5.5 の展開および構成図のプロセス

目次1. インストール要件2. OSイメージのダウンロード3. VMware Workstation...

Vueライフサイクル機能の詳細な説明

目次ライフサイクル関数一般的なライフサイクルフックVue のインスタンス破棄について:要約するライフ...