ScrollArea
<script setup lang="ts">
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'radix-vue'
const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
</script>
<template>
<ScrollAreaRoot
class="w-[200px] h-[225px] rounded overflow-hidden shadow-[0_2px_10px] shadow-blackA7 bg-white"
style="--scrollbar-size: 10px"
>
<ScrollAreaViewport class="w-full h-full rounded">
<div class="py-[15px] px-5">
<div class="text-grass11 text-[15px] leading-[18px] font-semibold">
Tags
</div>
<div
v-for="tag in tags"
:key="tag"
class="text-mauve12 text-[13px] leading-[18px] mt-2.5 pt-2.5 border-t border-t-mauve6"
>
{{ tag }}
</div>
</div>
</ScrollAreaViewport>
<ScrollAreaScrollbar
class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
orientation="vertical"
>
<ScrollAreaThumb
class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
/>
</ScrollAreaScrollbar>
<ScrollAreaScrollbar
class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
orientation="horizontal"
>
<ScrollAreaThumb
class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
/>
</ScrollAreaScrollbar>
</ScrollAreaRoot>
</template>機能
- スクロールバーはスクロール可能なコンテンツの上に配置され、スペースを占有しません。
- スクロールはネイティブです。CSS変換による位置の移動はありません。
- コントロール操作時のみポインターの動作をシミュレートするため、キーボード操作には影響しません。
- 右から左への方向をサポートします。
インストール
コマンドラインからコンポーネントをインストールします。
$ npm add radix-vue構造
すべてのパーツをインポートして組み立てます。
<script setup>
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'radix-vue'
</script>
<template>
<ScrollAreaRoot>
<ScrollAreaViewport />
<ScrollAreaScrollbar orientation="horizontal">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaScrollbar orientation="vertical">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaCorner />
</ScrollAreaRoot>
</template>APIリファレンス
ルート
スクロールエリアのすべてのパーツが含まれています。
| プロパティ | デフォルト | 型 |
|---|---|---|
as | 'div' | AsTag | Componentこのコンポーネントがレンダリングされる要素またはコンポーネント。`asChild` で上書きできます。 |
asChild | booleanデフォルトのレンダリング要素を子として渡された要素に変更し、それらのプロパティと動作をマージします。 詳細については、コンポジションガイドをお読みください。 | |
dir | 'ltr' | 'rtl'該当する場合のコンボボックスの読み取り方向。 | |
scrollHideDelay | 600 | number型が `scroll` または `hover` に設定されている場合、このプロパティは、ユーザーがスクロールバーの操作を停止した後にスクロールバーが非表示になるまでの時間（ミリ秒単位）を決定します。 |
type | 'hover' | 'always' | 'scroll' | 'hover' | 'auto'MacOSのスクロールバー設定がネイティブスクロールバーの表示を制御する方法と同様に、スクロールバーの表示方法を指定します。 `auto` - コンテンツが対応する方向にオーバーフローしている場合にスクロールバーが表示されます。 |
| メソッド | 型 |
|---|---|
scrollTop | () => voidビューポートを一番上にスクロールします |
scrollTopLeft | () => voidビューポートを左上にスクロールします |
ビューポート
スクロールエリアのビューポート領域。
| プロパティ | デフォルト | 型 |
|---|---|---|
as | 'div' | AsTag | Componentこのコンポーネントがレンダリングされる要素またはコンポーネント。`asChild` で上書きできます。 |
asChild | booleanデフォルトのレンダリング要素を子として渡された要素に変更し、それらのプロパティと動作をマージします。 詳細については、コンポジションガイドをお読みください。 | |
nonce | stringスタイルタグに `nonce` 属性を追加します。これは、コンテンツセキュリティポリシーで使用できます。 |
スクロールバー
垂直スクロールバー。`orientation` プロパティを持つ2つ目の `Scrollbar` を追加して、水平スクロールを有効にします。
| プロパティ | デフォルト | 型 |
|---|---|---|
as | 'div' | AsTag | Componentこのコンポーネントがレンダリングされる要素またはコンポーネント。`asChild` で上書きできます。 |
asChild | booleanデフォルトのレンダリング要素を子として渡された要素に変更し、それらのプロパティと動作をマージします。 詳細については、コンポジションガイドをお読みください。 | |
forceMount | booleanより詳細な制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に役立ちます。 | |
orientation | 'vertical' | 'vertical' | 'horizontal'スクロールバーの方向 |
| データ属性 | 値 |
|---|---|
[data-state] | "visible" | "hidden" |
[data-orientation] | "vertical" | "horizontal" |
つまみ
`ScrollAreaScrollbar` で使用されるつまみ。
| プロパティ | デフォルト | 型 |
|---|---|---|
as | 'div' | AsTag | Componentこのコンポーネントがレンダリングされる要素またはコンポーネント。`asChild` で上書きできます。 |
asChild | booleanデフォルトのレンダリング要素を子として渡された要素に変更し、それらのプロパティと動作をマージします。 詳細については、コンポジションガイドをお読みください。 |
| データ属性 | 値 |
|---|---|
[data-state] | "visible" | "hidden" |
コーナー
垂直スクロールバーと水平スクロールバーが交わるコーナー。
| プロパティ | デフォルト | 型 |
|---|---|---|
as | 'div' | AsTag | Componentこのコンポーネントがレンダリングされる要素またはコンポーネント。`asChild` で上書きできます。 |
asChild | booleanデフォルトのレンダリング要素を子として渡された要素に変更し、それらのプロパティと動作をマージします。 詳細については、コンポジションガイドをお読みください。 |
アクセシビリティ
ほとんどの場合、ネイティブスクロールに依存し、CSSで使用可能なカスタマイズオプションを使用するのが最適です。それが不十分な場合、`ScrollArea` はブラウザのネイティブスクロール動作（およびキーボードスクロールなどのアクセシビリティ機能）を維持しながら、追加のカスタマイズ可能性を提供します。
キーボード操作
コンポーネントはネイティブスクロールに依存しているため、キーボードによるスクロールはデフォルトでサポートされています。特定のキーボード操作はプラットフォームによって異なる場合があるため、ここではそれらを指定したり、キーイベントによるスクロールを処理するための特定のイベントリスナーを追加したりしません。