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 — 一部の要素の角の部分的なスタイル（例：テキストエリアのドラッグ可能なボタン）

知らせ：

（１）ブラウザのサポート：

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

（２）縦・横スクロールバーの設定が可能

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

（３）スクロールバー上のボタン（: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ベースのブラウザ

例:

（１）スクロールバーの両端のボタンに用いられる画像と、四隅にそれぞれ用いられる４つの画像。

（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>

結果：