CSS3 スクロールバー-webkit-scrollbar_html/css_WEB-ITnose

Webkit は、エリア、リスト ボックス、ドロップダウン メニュー、およびオーバーフロー属性を持つテキストエリアのスクロール バーのカスタム スタイルをサポートするようになりました。

導入をスキップしてデモを直接視聴したい場合は、デモをクリックしてください

スクロールバーは疑似要素であり、スタイルはカスタマイズできます。この疑似クラスは、WebKit 自体のスクロール バーのレンダリングをオフにし、ユーザー定義の CSS 情報に従ってのみレンダリングすることができます。例:

::-webkit-scrollbar {

width: 13px;

height: 13px;

}

width 属性と height 属性は、垂直スクロール バーの幅と水平スクロール バーの高さを表します。それぞれ。 % パーセンテージとして指定することもできます。この場合、次のようにウィンドウ全体を占めるスクロール バーのパーセンテージを表します。スクロールバー スクロール ボタンとトラックが含まれます。トラック自体もさらに雰囲気のあるトラックピースとスライダーを備えています。 Orbital Debris 値スライダの上下の領域。スクロール バーの角は、テキスト領域のサイズ変更など、さまざまなスタイルに設定できます。

スクロール バーに関する疑似要素はすべて次のとおりです:

::-webkit-scrollbar{/*1*/}

::-webkit-scrollbar-button{/*2*/}

::-webkit -scrollbar-track{/*3*/}

::-webkit-scrollbar-track-piece{/*4*/}

::-webkit-scrollbar-thumb{/*5*/}

: :-webkit-scrollbar-corner{/*6*/}

::-webkit-resizer{/*7*/}

スクロールを作成するには、境界線、影、背景画像などの任意のオブジェクトを設定できますバー オペレーティング システム自体の設定に従ってインタラクティブな動作を完了します。以下の疑似クラスを上記の疑似要素に適用できます。

:horizo​​ntal (水平疑似クラスは任意の水平スクロールバーに適しています)

:vertical (垂直疑似クラスは任意の垂直スクロールバーに適しています)

:decrement (デクリメント疑似クラスはボタンに適しています)

:increment (インクリメント疑似クラスはボタンやトラック フラグメントに適しています。インクリメント ボタンまたはトラック フラグメントを表します) 、領域を右に移動できる領域やボタンなど) 下または左に移動できる領域やボタン)

:start(start 擬似クラスはボタンとトラック フラグメントに適用されます。オブジェクト (ボタン トラック フラグメント) かどうかを示します) はスライダーの前に配置されます)

:end(end 疑似クラスはボタンとトラック フラグメントに適用されます。オブジェクト (ボタン トラック フラグメント) がスライダーの後ろに配置されるかどうかを示します)

:double-button (ダブルボタン) pseudo-class は、ボタンとトラック フラグメントに適用されます。トラックの終了位置が 1 組のボタンであるかどうかを決定します。つまり、トラック フラグメントが 1 組のボタンの隣にあるかどうかを決定します。 pseudo-class は、ボタンとトラック フラグメントに適しています。つまり、トラック フラグメントが別のボタンで隣接しているかどうかを判断します。 -button 疑似クラスは、トラックの最後にボタンがないことを示します。)

:corner-present(corner-present 疑似クラスは、スクロール バーの隅が存在するかどうかを示します。)

:window-inactive (すべてのスクロール バーに適用され、ウィンドウにフォーカスがないときにスクロール バーを含む領域を示します。)

::-webkit-scrollbar-track-piece:start {

/*スクロール バーの上半分または 左半分*/

}

::-webkit-scrollbar-thumb:window-inactive {

/*フォーカスが現在の領域にないときのスライダーの状態*/

}

::-webkit -scrollbar-button:horizo​​ntal :decrement:hover {

/*水平スクロールバーの下のボタンにマウスを置いたときの状態*/

}

詳細については、http://my.oschina を参照してください。 net/hehongbo/blog/205128