Scroll Area

Newv0.3.0

カスタムスタイルのスクロールバーを持つスクロール可能なコンテナ。長いリストやコンテンツの表示に使用します。

基本的な使い方

垂直スクロールエリア

通知一覧

Item 1

This is the description for item 1

Item 2

This is the description for item 2

Item 3

This is the description for item 3

Item 4

This is the description for item 4

Item 5

This is the description for item 5

Item 6

This is the description for item 6

Item 7

This is the description for item 7

Item 8

This is the description for item 8

Item 9

This is the description for item 9

Item 10

This is the description for item 10

Item 11

This is the description for item 11

Item 12

This is the description for item 12

Item 13

This is the description for item 13

Item 14

This is the description for item 14

Item 15

This is the description for item 15

Item 16

This is the description for item 16

Item 17

This is the description for item 17

Item 18

This is the description for item 18

Item 19

This is the description for item 19

Item 20

This is the description for item 20

tsx

class="token keyword">import { ScrollArea } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">ScrollArea class="token keyword">class=class="token keyword">class="token string">"h-class="token number">72 w-full rounded-lg border">
  <class="token tag">div class="token keyword">class=class="token keyword">class="token string">"p-class="token number">4">
    {items.class="token function">map((item) => (
      <class="token tag">div key={item.id} class="token keyword">class=class="token keyword">class="token string">"p-class="token number">3">
        <class="token tag">p>{item.title}</class="token tag">p>
      </class="token tag">div>
    ))}
  </class="token tag">div>
</class="token tag">ScrollArea>

水平スクロール

横方向にスクロール可能なエリア

React

Vue

Angular

Svelte

Qwik

Solid

Preact

Next.js

Nuxt

Remix

Astro

SvelteKit

Gatsby

Eleventy

Vite

tsx

<class="token tag">ScrollArea class="token keyword">class=class="token keyword">class="token string">"w-full whitespace-nowrap">
  <class="token tag">div class="token keyword">class=class="token keyword">class="token string">"flex p-class="token number">4 gap-class="token number">4">
    {items.class="token function">map((item) => (
      <class="token tag">div key={item} class="token keyword">class=class="token keyword">class="token string">"flex-shrink-class="token number">0 w-class="token number">40 h-class="token number">24">
        {item}
      </class="token tag">div>
    ))}
  </class="token tag">div>
</class="token tag">ScrollArea>

タグリスト

横スクロール可能なタグ

使用例

実際の使用シーン

チャット履歴

こんにちは！

10:00

お疲れ様です！

10:01

明日のミーティングの件ですが

10:02

13時からでよろしいでしょうか？

10:02

大丈夫です！

10:05

会議室Aで行いましょう

10:05

承知しました

10:06

資料は事前に共有します

10:07

ありがとうございます

10:08

ファイルリスト

document.pdf

2.4 MB

presentation.pptx

5.1 MB

spreadsheet.xlsx

1.2 MB

image.png

856 KB

archive.zip

12.8 MB

video.mp4

45.2 MB

notes.txt

4 KB

design.figma

8.9 MB

Props API

Prop	Type	Default	Description
`class`	`string`	-	コンテナのCSSクラス（高さ指定など）
`orientation`	`"vertical" \| "horizontal" \| "both"`	`"vertical"`	スクロール方向

Accessibility

キーボードでスクロール可能（矢印キー、Page Up/Down）
スクロールバーはマウスでドラッグ可能
タッチデバイスではネイティブスクロールを使用
スクリーンリーダーは通常通りコンテンツを読み上げ