CSSスクロールバーのスタイルをカスタマイズする方法の詳細な説明

CSSスクロールバーのスタイルをカスタマイズする方法の詳細な説明

この記事では、CSS スクロールバー セレクターを紹介し、Webkit ブラウザーと IE ブラウザーで水平スクロールバーと垂直スクロールバーをカスタマイズする方法をデモで示します。

0. 需要

ブラウザのデフォルトのスクロール バー スタイルはカスタマイズされておらず、見た目も美しくないため、使用したくない場合があります。では、スクロール バーのスタイルをどのようにカスタマイズするのでしょうか?以下で一緒に見てみましょう。

1 基本

1.1 Webkit コアの CSS スクロールバー セレクター

::-webkit-scrollbar CSS 疑似クラス セレクターは、要素のスクロールバーのスタイルに影響します。

財産:

::-webkit-scrollbar — スクロールバー全体

::-webkit-scrollbar-track — スクロールバー トラック

::-webkit-scrollbar-thumb — スクロールバーのつまみ

::-webkit-scrollbar-button — スクロールバー上のボタン(上矢印と下矢印)

::-webkit-scrollbar-track-piece — スライダーのないスクロールバーのトラック部分

::-webkit-scrollbar-corner — 垂直スクロールバーと水平スクロールバーが同時に交わるコーナー

::-webkit-resizer — 一部の要素の角の部分的なスタイル(例:テキストエリアのドラッグ可能なボタン)

知らせ:

(1)ブラウザのサポート:

::-webkit-scrollbar は、Webkit をサポートするブラウザ (Chrome、Safari) でのみ使用できます。

(2)縦・横スクロールバーの設定が可能

スクロール バーを水平 (:horizo​​ntal) に設定できます。指定しない場合は、デフォルトは垂直 (:vertical) です。

(3)スクロールバー上のボタン(:decrement、:increment)

以下のデモに表示される画像を設定できます。

1.2 IE カスタム スクロール バー スタイル

カスタマイズできるスタイルは比較的少なく、スクロールバーの各部分に表示される色しか制御できないため、カスタマイズ性は低いです。ここではいくつかのスタイルのみをリストします。scrollbar-3dlight-color や scrollbar-highlight-color などのスタイルを試しましたが、うまくいかなかったので、ここではリストしません。

scrollbar-arrow-color — スクロールバーの三角形の矢印の色 scrollbar-face-color — スクロールバーのスライダーの色

scrollbar-track-color — スクロールバーのトラックとボタンの背景色 scrollbar-shadow-color — スクロールボックスのスライダーの境界線の色

2. デモですぐに始める

2.1 Webkit ベースのブラウザ (Chrome、Safari) のカスタム スクロール バー スタイル

上記の説明が少し抽象的だと思われる場合は、ブラウザで直接デモを開き、デモ内のコメントを参照して各属性の意味を理解することができます。図ではいくつかのプロパティをマークしています。スクロール バーの外側のトラックのプロパティは図ではマークされていません。Chrome ブラウザ コンソールを開いてプロパティを表示できます。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <title>スクロールバーのデモ - lynnshen</title>
  <スタイル タイプ="text/css">
    * {
      マージン: 0;
      パディング: 0;
    }

    .scolltable {
      幅: 500ピクセル;
      高さ: 300px;
      境界線: 1px 黒一色;
      
      /*水平および垂直の中央揃えを実現する*/
      位置: 絶対;
      左: 50%;
      上位: 50%;
      左マージン: -250px;
      上マージン: -150px;

      オーバーフロー: スクロール;
    }

    。コンテンツ {
      /*.scolltable より広くする必要があります*/
      幅: 600ピクセル;
    }

    /*スクロールバー全体*/

    ::-webkit-スクロールバー{
      幅: 24px;
      背景色: 透明;
    }

    /* 水平スクロールバー全体 */

    ::-webkit-スクロールバー:水平{
      高さ: 24px;
      背景色: 透明;
    }

    /*スクロールバートラック*/

    ::-webkit-スクロールバートラック{
      背景色: #f6f8fc;
      右境界線: 1px 実線 #f1f5fa;
      境界線: 1px 実線 #f1f5fa;
      ;
    }

    /*垂直スライダー*/

    ::-webkit-スクロールバー-サムネイル {
      背景色: rgba(220, 228, 243, 1);
      境界線の半径: 0px;
      上境界線: 1px 実線 #edf2f9;
      下境界線: 1px 実線 #edf2f9;
      左境界線: 1px 実線 #f1f5fa;
    }

    /*水平スライダー*/

    ::-webkit-スクロールバー-サムネイル:水平{
      /* 背景色: rgba(220, 228, 243, 1); */
      境界線の半径: 0px;
      上境界線: 1px 実線 #edf2f9;
      /* 右境界線: 1px 実線 #f1f5fa;
      左ボーダー: 1px 実線 #f1f5fa; */
    }

    /*スクロール バーのボタン - 垂直スクロール バーを上に移動*/

    ::-webkit-スクロールバーボタン:減分{
      下境界線: 1px 実線 #edf2f9;
      高さ: 26px;
      背景: url("./images/scroll_up.png") 7px 9px 繰り返しなし;
      右境界線: 1px 実線 #f1f5fa;
      左境界線: 1px 実線 #f1f5fa;
    }

    /*スクロール バーのボタン - 垂直スクロール バーを下へ*/

    ::-webkit-スクロールバーボタン:増加{
      上境界線: 1px 実線 #edf2f9;
      高さ: 26px;
      背景: url("./images/scroll_down.png") 7px 10px 繰り返しなし;
      右境界線: 1px 実線 #f1f5fa;
      左境界線: 1px 実線 #f1f5fa;
      下境界線: 1px 実線 #f1f5fa;
    }

    /*スクロール バーのボタン - 左への水平スクロール バー*/

    ::-webkit-スクロールバーボタン:水平:減少{
      上境界線: 1px 実線 #edf2f9;
      幅: 26px;
      背景: url("./images/scroll_left.png") 9px 7px 繰り返しなし;
      上境界線: 1px 実線 #f1f5fa;
      下境界線: 1px 実線 #f1f5fa;
      右ボーダー:1px 実線 #f1f5fa;
    }

    /*スクロール バーのボタン - 右への水平スクロール バー*/

    ::-webkit-スクロールバーボタン:水平:増分{
      上境界線: 1px 実線 #edf2f9;
      幅: 25px;
      背景: url("./images/scroll_right.png") 10px 7px 繰り返しなし;
      左ボーダー:1px 実線 #f1f5fa;
    }
    
    /*コーナー*/
    ::-webkit-スクロールバーコーナー{
      境界線:1px実線 #dce4f3;
    }
  </スタイル>
  
</head>

<本文>
  <div class="scolltable">
    <div class="content">
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
  </div>
</本文>

</html>

結果:

WebKitベースのブラウザ

例:

(1)スクロールバーの両端のボタンに用いられる画像と、四隅にそれぞれ用いられる4つの画像。

(2).scolltableは、絶対配置を使用して要素の固定点を本体の中央に配置することで、水平方向と垂直方向の中央揃えの効果を実現します。次に、負のマージン(要素の幅と高さの半分)を使用して、要素を本文の中央に戻します。

2.2 IEカスタムスクロールバースタイル

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <title>IE のスクロールバー - lynnshen</title>
  <スタイル タイプ="text/css">
    * {
      マージン: 0;
      パディング: 0;
    }

    .scolltable {
      幅: 500ピクセル;
      高さ: 300px;
      境界線: 1px 黒一色;
      
      /*水平および垂直の中央揃えを実現する*/
      位置: 絶対;
      左: 50%;
      上位: 50%;
      左マージン: -250px;
      上マージン: -150px;

      オーバーフロー: スクロール;
      
      スクロールバーの表面の色:緑黄色;
      スクロールバー矢印の色:ゴールデンロッド;
      スクロールバーの影の色:赤;
      スクロールバートラックの色:ピンク;
    }

    。コンテンツ {
      /*.scolltable より広くする必要があります*/
      幅: 600ピクセル;
    }
    
  </スタイル>
  
</head>

<本文>
  <div class="scolltable">
    <div class="content">
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
  </div>
</本文>

</html>

結果:

IE

3. まとめ

この記事では主に、Webkit ベースのブラウザと IE でスクロール バーのスタイルをカスタマイズする方法を記録し、それぞれ 2 つのデモを提供します。ご質問がございましたら、お気軽にご指摘ください。

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

<<:  Vueの子コンポーネントと親コンポーネントの詳細な分析

>>:  Dockerイメージ構築原理の分析(Dockerをインストールしなくてもイメージを構築できる)

推薦する

Ubuntu での CUDA と CUDNN のインストールとアンインストールの実装

目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...

Vueコンポーネントドキュメントを自動生成する方法を分析する

目次1. 現状2. コミュニティソリューション2.1 事業レビュー3. 技術的ソリューション3.1....

Tomcat をサービスとして登録する際に注意すべき点のまとめ

Tomcat をサービスとして登録する場合の注意点は次のとおりです。 インターフェースを開いたら、以...

MySQL学習記録: KEYパーティションが引き起こした血なまぐさい事件

需要背景ビジネス テーブル tb_image のデータの一部は次のとおりです。id は一意ですが、i...

MySQLで行を列に変換する方法

MySQL の行から列への操作いわゆる行から列への操作は、テーブルの行情報を列情報に変換することです...

JavaScriptでマクロを使用する方法

言語では、DSL を実装するためにマクロがよく使用されます。マクロを使用すると、開発者は JSX 構...

VMWare で Ubuntu を再起動した後、インターネットにアクセスできなくなる問題の解決方法

VMWareでUbuntuを再起動した後、インターネットにアクセスできなくなる問題を解決するには、次...

ウェブデザイナーが知っておくべき効率的なナビゲーションデザインの3つの原則

ウェブサイトのナビゲーションを設計することは、家の基礎を築くようなものです。基礎がしっかりしていなけ...

MySQL で binlog を使用する際のフォーマットの選択方法

目次1. binlogの3つのモード1.ステートメントレベルモード2. 行レベルモード3. 混合モー...

CSS を使用して画像の色を変更する 100 の方法 (収集する価値あり)

序文「画像処理というと、PhotoShop などの画像処理ツールを思い浮かべることが多いです。フロン...

HTML で JavaScript を使用する

<script> タグHTML5では、スクリプトには次の属性があります: async、d...

CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)

Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...

jQueryはフォントサイズ調整ケースを実装します

この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...

MySQL での mysqladmin 日常管理コマンドの概要 (必読)

mysqladmin ツールの使用形式は次のとおりです。 mysqladmin [オプション] コ...

MySQL 5.7.21 履歴データディレクトリからデータを復元するチュートリアルの解凍バージョン

状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...