CSS3のカスタムスクロールバーのスタイル

カスタムスクロールバーを実現します

次のようにカーネルのこのセクションでは、WebKitのブラウザは、利用擬似クラスは、デフォルトのスタイルのスクロールバーを変更するには:


スクロールバーの一部

1. :: - スクロールバーのWebKitの-スクロールバー不可欠

2. :: - 小さなボックス内のWebKit、スクロールバーのサムスクロールバー(右または左)の上方に下方に移動することができます

3. :: - (親指が装備されている)、スクロールバーのトラックのWebKitの-スクロールバーのトラック

4. :: - トラックボタンの両端のWebKit-スクロールバーボタンの位置によるスクロールバーを、微調整の小さなボックスをクリックして。

5. :: - webkitの-スクロールバーのトラック部分の内側の軌道スクロールバーの中間部分

6. :: - WebKitの-スクロールバーコーナーエッジ、即ち、垂直スクロールバーと水平スクロールバーが交差します

7. :: - webkitの-サイズ変更2つのスクロールバーの角にドラッグ要素サイズギズモを調整します

 

次のようにスクロールバー組成物の構造は次のとおりです。

 

 

その他の設定:

:水平  
//水平擬似クラスは、任意の水平方向のスクロールバーに適用される  
  
垂直:  
任意の垂直スクロールバーの//垂直擬似クラス  
  
:デクリメント  
//減少ボタン擬似クラスおよび軌道デブリのに適しています。作らまたは右領域と領域ボタンへ移動することができ、例えば、減少ボタン又は軌道デブリを表す  
  
INCREMENT:  
// INCREMENTボタン擬似クラスおよび軌道デブリのに適しています。領域が左又は下方領域とボタンに移動していること、例えば、ボタンまたは増分軌道デブリを表す  
  
:スタート  
//スタートボタン擬似クラスおよび軌道デブリのに適しています。フロントスライダ上のオブジェクト(ボタン軌道デブリ)意味  
  
:終了  
//終了疑似クラスは、ボタンや軌道破片に適用されます。スライダーの背面にあるオブジェクト(ボタン軌道デブリ)平均  
  
:ダブルボタン  
//ダブルボタンボタン擬似クラスと軌道破片に適しています。トラックの端部の位置がボタンのペアであるかどうかを決定します。それは一緒に一対のボタンの隣の軌道デブリです。  
  
:SINGLE-ボタン  
//ボタンSINGLEボタン擬似クラスと軌道破片に適しています。トラックの端部の位置がボタンであるかどうかを決定します。それは別のボタンの横軌道デブリです。  
  
:ボタンNO-  
NO-Buttonクラスは、擬似トラック位置が終了ボタンではない表します。  
  
:コーナープレゼント  
//コーナープレゼント疑似クラスは、コーナーが存在するスクロールバーを表します。  
  
:ウィンドウ非アクティブ  
//すべてのスクロールバー、スクロールバーのためには、フォーカスを含む領域は、時間の窓ではありません表します。  
  
:: - WebKitの-スクロールバーのトラックピース...:スタート{  
/ *最後の半分またはスクロールバーの左半分* /  
}  
  
:: - WebKitの-親指-スクロールバー:ウィンドウ非アクティブ{  
/ *焦点はスライダーの地域の現在の状態ではありません* /  
}  
  
:: - WebKitの-スクロールボタン:横:デクリメント:ホバー{  
/ *場合以下水平スクロールバー上でマウスボタンの状態* /  
}  

 

例:

HTML

<のdivクラス= "テストテスト-1">

        <DIV CLASS = "スクロールバー"> </ div>

</ div>

 

CSS

。テスト{

    幅:は50px;

    高さ:200pxの。

    オーバーフロー:自動;

    フロート:左;

    マージン:5pxの;

    国境:なし;

}

。スクロール・バー{

    幅:30px;

    高さ:300ピクセル;

    マージン:0自動;

 

}

.TEST-1 :: - webkitの-スクロールバー{/ *スクロールバーの全体的なスタイル* /

        幅:10pxの; / *アスペクト垂直スクロールバーのサイズを対応します* /

        高さ:1ピクセル。

    }

.TEST-1 :: - webkitの-スクロールバーの親指{/ * *小さなボックス内のスクロール/

        国境半径:10pxの;

         -webkitボックスシャドウ:インセット0 5pxのRGBA(0,0,0,0.2)。

        背景:#535353;

    }

.TEST-1 :: - WebKitの-スクロールバートラック{/ * *軌道スクロール内側/

        -webkitボックスシャドウ:インセット0 5pxのRGBA(0,0,0,0.2)。

        国境半径:10pxの;

        背景:#EDEDED。

}

 

結果は以下の通りであります:

 

Chromeでのみ有効注意!

:: - WebKitの-スクロール{}このようなアプローチは、グローバル変更スクロールバーです。

元の記事を公開 ウォンの賞賛0 ビュー4167

おすすめ

転載: blog.csdn.net/b_just/article/details/103194380