コンテンツにスキップ
Hypermedia Components

スクロールエリア

hc-scroll-area は、細いテーマカラーのスクロールバーを持つスクロール 領域です — shadcn の ScrollArea 相当。純 CSS です: 非標準の ::-webkit-scrollbar 疑似要素ではなく、標準の CSS Scrollbars モジュール(scrollbar-width + scrollbar-color、Baseline 2025)を 使います。JavaScript もオーバーレイ要素もありません — ブラウザ自身の (いまやスタイル可能な)スクロールバーが仕事をします。

ブラウザのベースライン

Section titled “ブラウザのベースライン”
機能必要バージョン
scrollbar-width / scrollbar-colorBaseline 2025(Chrome 121、Edge 121、Firefox 64、Safari 18.2)

古いブラウザでは単にデフォルトのスクロールバーが表示されるだけです — 何も壊れません。

基本の HTML

Section titled “基本の HTML”

領域のスクロール軸に最大サイズを与えます。キーボードユーザーが スクロールできるよう tabindex="0" を足してください (アクセシビリティを参照)。

Scroll this region — the scrollbar is thin and themed.

Line two.

Line three.

Line four.

Line five.

Line six.

Line seven.

Line eight.

向き

Section titled “向き”

data-orientation がスクロール軸を選びます: vertical(デフォルト)、 horizontal、both。

A very long single line of tags that overflows horizontally and scrolls sideways instead of wrapping onto multiple lines.

overscroll-behavior: contain が設定されているため、領域の端まで スクロールしても背後のページに連鎖しません。

エッジシャドウ

Section titled “エッジシャドウ”

data-shadows を足すと、その方向にまだスクロールできるコンテンツが あるときだけ現れる控えめなシャドウが各スクロール端に付きます — 端から離れるとフェードインし、端に達するとフェードアウトします。

Scroll — the top / bottom shadows show only when there’s more above or below.

Line two.

Line three.

Line four.

Line five.

Line six.

Line seven.

Line eight.

これは純 CSS です — 不透明な「カバー」レイヤーがコンテンツと一緒に スクロールし(background-attachment: local)、端にぴったり付いた ときに固定のシャドウレイヤーを隠す scrolling-shadows グラデーションです。JavaScript はなく、意図的にスクロール駆動 アニメーションも使いません(animation-timeline: scroll() は 2026 年時点で Baseline ではありません)。そのため background-attachment: local が動く環境 すべてで動作します。data-orientation(vertical / horizontal)を尊重 します。カバーレイヤーは不透明な背景を塗るため、領域が載っている面に 合わせて --hc-scroll-area-bg を設定してください(デフォルト: surface の色)。

アクセシビリティ

Section titled “アクセシビリティ”
  • ユーザーがスクロールできる領域はキーボードでフォーカス可能で なければなりません。さもないとキーボードのみ / スイッチコントロール のユーザーがコンテンツに到達できません。.hc-scroll-area に tabindex="0" を足してください(これが ↑/↓ / PageUp/PageDown でのスクロールを可能にします)。コンポーネントは 純 CSS なので、これを代わりに追加することはできません — マークアップ 契約の一部です。
  • 領域が意味のあるコンテンツのまとまりであるときは、role="region" と aria-label も与えて、スクリーンリーダーのユーザーがナビゲート可能な ランドマークを得られるようにします。
  • スクロールバーの色はトラックに対して十分なコントラストを保つべき です。デフォルトは境界線 / ミュートテキストのトークンを使います。

テーマ用トークン

Section titled “テーマ用トークン”
トークンパス用途
scroll-area.thumbスクロールバーのつまみの色(静止時)。
scroll-area.thumb-hover領域のホバー中のつまみの色。
scroll-area.trackスクロールバーのトラックの色(デフォルト透明)。
scroll-area.shadowエッジシャドウの色(data-shadows。テーマ適応)。

CSS 変数

Section titled “CSS 変数”
生成される CSS 変数を表示
--hc-scroll-area-thumb | -thumb-hover | -track
--hc-scroll-area-shadow          /* edge-shadow color (data-shadows) */
--hc-scroll-area-bg              /* cover color; default --hc-color-surface */
--hc-scroll-area-shadow-cover    /* cover band size; default 1.5rem */
--hc-scroll-area-shadow-size     /* shadow band size; default 0.6rem */

補足と対象外

Section titled “補足と対象外”
  • スタイリングには標準の scrollbar-width / scrollbar-color を 使います。これらはモダンな環境すべてで細いテーマ付きスクロールバー を与えますが、つまみの角丸のカスタムはできません。Chromium / WebKit で丸いつまみが欲しければ自分で ::-webkit-scrollbar ルールを重ねる こともできますが、Firefox はそれらを無視し、両方が適用される場面では 標準の scrollbar-color が上書きすることに注意してください。
  • エッジシャドウはサポートされています — エッジシャドウを参照。完全にカスタムなオーバー レイスクロールバー(JS 描画のつまみ)とスクロールボタンは対象外の ままです(ネイティブの、いまやスタイル可能なスクロールバーを使い ます)。

関連

Section titled “関連”
  • カード — スクロール エリアを包むよくあるコンテナ。
  • コマンド · メニュー — それらの リストは同じ細いスクロールバーの感触でスクロールします。