CSS を使用して Webkit ベースのブラウザのスクロール バーをカスタマイズする_html/css_WEB-ITnose

CSS を使用して Webkit カーネル ブラウザのスクロール バーを設定し、主に次の 7 つの属性を設定します:
1.::-webkit-scrollbar /*スクロール バー全体、幅と高さを設定できます*/
2.::-webkit-scrollbar- button /*スクロールバーの両端のボタン*/
3.::-webkit-scrollbar-track /*外側のトラック*/
4.::-webkit-scrollbar-track -ピース /*内側のスクロール溝*/
5.::-webkit-scrollbar-thumb /*スクロール スライダー*/
6.::-webkit-scrollbar-corner /*コーナー*/

7.::-webkit -resizer /*右下隅のドラッグ ブロック スタイルを定義します */

その他のプロパティ:

:水平水平スクロール バー
:垂直垂直スクロール バー
:ボタンと内部トラック (トラック ピース) に適用されるデクリメント。これは、ボタンまたは内部トラックがウィンドウの位置を減らすかどうかを示すために使用されます (たとえば、垂直スクロール バーの上、水平スクロール バーの左側)。
:increment decrement も同様で、ボタンまたは内部トラックが増加します ビューポートの位置 (たとえば、垂直スクロール バーの下、水平スクロール バーの右側)
:start 疑似クラスはボタンとスライダーにも適用されます。オブジェクトをスライダーの前に配置するかどうかを定義するために使用されます。
:end は start 疑似クラスに似ており、オブジェクトがスライダーの後ろに配置されているかどうかを識別します。
:double-button この疑似クラスはボタンと内部トラックに使用されます。ボタンがスクロール バーの同じ端に配置された 1 対のボタンの 1 つであるかどうかを判断するために使用されます。内側トラックの場合、これは内側トラックが一対のボタンの隣にあるかどうかを示します。
:single-button は、double-button 疑似クラスに似ています。ボタンの場合、ボタンがスクロール バーのセクションに独立して存在するかどうかを判断するために使用されます。内側トラックの場合、内側トラックが単一ボタンの隣にあるかどうかを示します。
:no-button は内側のトラックに使用され、たとえば、スクロール バーの両端にボタンがない場合に、内側のトラックをスクロール バーの端までスクロールするかどうかを示します。
:corner-present はすべてのスクロール バー トラックに使用され、スクロール バーの丸い角が表示されるかどうかを示します。
:window-inactive はすべてのスクロール バー トラックに使用され、スクロール バーが適用されるページ コンテナー (要素) が現在アクティブ化されているかどうかを示します。 (Webkit の最近のバージョンでは、この疑似クラスは ::selection 疑似要素にも使用できます。Webkit チームはこれを拡張し、標準の疑似クラスに昇格する計画があります)