このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CSS スクロールバースタイル設定
CSS スクロールバースタイル設定 (CSS scrollbars styling) モジュールは、スクロールバーの視覚的なスタイル設定に使用できるプロパティを定義しています。必要に応じてスクロールバーの幅をカスタマイズできます。また、スクロールバーの背景であるスクロールバーのトラックの色、およびスクロールバーのドラッグ可能なハンドルであるスクロールバーのつまみの色もカスタマイズできます。
スクロールバースタイル設定の実例
この例では、赤いつまみとオレンジ色のトラックを持つ細いスクロールバーが定義されています。つまみを見るには、テキストをスクロールする必要があります。スクロールバーが可視状態になったら、カーソルをスクロールバーの上に移動させるとトラックが表示されます。
.poem {
width: 300px;
height: 100px;
border: 1px solid;
}
css
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
<blockquote class="poem">
<h3>A Small Needful Fact</h3>
<pre>
Is that Eric Garner worked
for some time for the Parks and Rec.
Horticultural Department, which means,
perhaps, that with his very large hands,
perhaps, in all likelihood,
he put gently into the earth
some plants which, most likely,
some of them, in all likelihood,
continue to grow, continue
to do what such plants do, like house
and feed small and necessary creatures,
like being pleasant to touch and smell,
like converting sunlight
into food, like making it easier
for us to breathe.
</pre
>
<p>
- <a href="https://onbeing.org/poetry/a-small-needful-fact/">Ross Gay</a>
</p>
</blockquote>
[フレーム]
メモ: スクロールバーをカスタマイズする際は、つまみとトラックが周囲の背景と十分なコントラストを持つようにしてください。また、タッチ入力を使用する人のために、スクロールバーのヒット領域が十分な大きさであることを確認してください。
リファレンス
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擬似要素- スクロールコンテナー 用語集の用語
scrollbarARIA ロール
仕様書
| Specification |
|---|
| CSS Scrollbars Styling Module Level 1 |