CSS スクロールバースタイル設定
CSS スクロールバースタイル設定 (CSS scrollbars styling) モジュールは、スクロールバーの視覚的なスタイル設定に使用できるプロパティを定義しています。必要に応じてスクロールバーの幅をカスタマイズできます。また、スクロールバーの背景であるスクロールバーのトラックの色、およびスクロールバーのドラッグ可能なハンドルであるスクロールバーのつまみの色もカスタマイズできます。
スクロールバースタイル設定の実例
この例では、赤いつまみとオレンジ色のトラックを持つ細いスクロールバーが定義されています。つまみを見るには、テキストをスクロールする必要があります。スクロールバーが可視状態になったら、カーソルをスクロールバーの上に移動させるとトラックが表示されます。
css
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
メモ: スクロールバーをカスタマイズする際は、つまみとトラックが周囲の背景と十分なコントラストを持つようにしてください。また、タッチ入力を使用する人のために、スクロールバーのヒット領域が十分な大きさであることを確認してください。
リファレンス
CSS プロパティ
関連概念
overflow-block
プロパティoverflow-inline
プロパティoverflow-x
プロパティoverflow-y
プロパティoverflow
一括指定プロパティoverflow-clip-margin
プロパティscrollbar-gutter
プロパティscroll-behavior
プロパティscroll-margin
一括指定プロパティscroll-padding
一括指定プロパティscroll-snap-align
プロパティscroll-snap-stop
プロパティscroll-snap-type
プロパティ::-webkit-scrollbar
擬似要素- スクロールコンテナー 用語集の用語
scrollbar
ARIA ロール
仕様書
Specification |
---|
CSS Scrollbars Styling Module Level 1 |