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をインストールしなくてもイメージを構築できる)

推薦する

加算、減算、乗算、除算の機能を実現するには、HTML に 2 つの数値を入力します。

1. parseFloat() 関数Web ページ上に簡単な計算機を作成し、テキスト ボックスに ...

Linux chkconfig コマンドの使用

1. コマンドの紹介chkconfig コマンドは、システム サービスの実行レベル情報を更新および照...

emとは?emとpxの紹介と変換方法

それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...

JavaScript の isPrototypeOf 関数

目次1. isPrototypeOf()例 1、オブジェクト クラス インスタンス:例 2: Hum...

Vueはテーブルページング機能を実装します

この記事では、テーブルページング機能を実現するためのVueの具体的なコードを例として紹介します。具体...

MySQLオンラインDDLの使用に関する詳細な説明

目次文章LOCKパラメータアルゴリズムパラメータCOPY TABLE プロセスIN-PLACEプロセ...

Linux は suid vim.basic ファイルを使用して権限昇格を実現します。

カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...

CSSのline-heightを継承する方法

Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...

Vue+element+springboot でファイルダウンロードの進行状況バー表示機能を実装する例

目次1. 需要背景2. 最適化計画3. 具体的な実施3.1 フロントエンドコード3.2 背景コード4...

優秀なウェブ開発者が開発スキルを向上させるために知っておくべき10のこと

「開発とは、単にコードを書くだけではない」というのは、3EV の Dan Frost 氏の言葉です。...

Jenkins の Publish Over SSH プラグインを使用してプロジェクトをリモート マシンにデプロイする手順

SSH プラグインの使用による公開Publish Over SSH を使用する前に、SSH 秘密キー...

JavaScript タイマーの詳細

目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...

WMLタグの概要

構造関連タグ--------------------------------------------...

SpringBootをDockerにデプロイし、jarパッケージを置き換える方法の詳細な説明

目次プロジェクトディレクトリDockerファイルファイルの展開画像を生成するコンテナを起動するウェブ...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...