Clever Geek Handbook

WebKitはスクロールバーのスタイルを学習しました



1週間前、最新のWebKitビルドにより、スクロールバーが出現する可能性があるすべての要素のスクロールバーの外観を再定義する機能が追加されたことが気づかれていませんでした。





イノベーションはまだ他のエンジンに実装されていません（普及率がゼロになる可能性があります）が、それでも共通の利益のために機能し、良いロールモデルを示し、開発者がじっと座っていないようにするのに役立ちます。 以下はオリジナルの出版物の翻訳です。





スクロールバーのスタイルを決定する記号は、スクロールバー擬似クラスです。 指定されている場合、標準コントロールの代わりにWebKitはCSSで指定された情報を使用します。



::-webkit-scrollbar {

幅：13px;

高さ：13px;

}



widthプロパティとheightプロパティは、それぞれ垂直スクロールバーの幅と高さを指定します。 値はパーセントで設定することもできます。これにより、通常どおり、親要素のサイズに基づいてピクセル値が計算されます。



スクロールバーは、バーとスクロールボタンで構成されます。 ストリップは、一種のフローティング「ボタン」とその周囲の2つの空の領域で構成されます。 スクロールバー自体のスタイリングに加えて、垂直および水平スクロールバーが交わる場所で空の「コーナー」のスタイルを設定することもできます。 さらに、TEXTAREAで「リサイズ」を定型化できます。 新しい擬似要素の完全なリストは次のとおりです。







これらの各オブジェクトは、境界線、影、背景画像などを定義するスタイルで設定できるため、完全にカスタムのスクロールバーを作成できます。 同時に、OSの設定（スクロールボタンの位置やクリックへの反応など）に応じた動作を保存します。 次の擬似クラスを擬似要素に適用できます。







上記のすべてに加えて、selectors：enabled 、: disabled 、: hover、およびactiveは、スクロールバー要素でも機能します。 一部の要素を非表示にするために、表示を設定できます：noneプロパティ



負のスクロールバーを含むスクロールバーのマージンも設定できます。 したがって、たとえば、スクロールボタンの重なりが実現されます。



新しい WebKit アセンブリを使用している場合、 この例では、MacOS Xの機能（デュアルボタン、非アクティブ、ボタンのオーバーラップなど）とWindows Vista（ホバー効果、バーをクリックしたときの外観）の両方を実装する派手なスクロールバーを見ることができますスクロールなど）。



More articles:


All Articles