125k

Scroll Area

PreviousNext

カスタムのクロスブラウザースタイルのために、ネイティブのスクロール機能を拡張します。

BaseRadixReact Aria
import * as React from "react"

import { ScrollArea } from "@/components/ui/base/scroll-area"

インストール

pnpm dlx shadcn@latest add scroll-area

使い方

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>

構成

次の構成を使用して、ScrollArea を構築します。

ScrollArea
└── ScrollBar

水平方向

水平スクロールには ScrollBar を orientation="horizontal" とともに使用します。

import * as React from "react"
import Image from "next/image"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import * as React from "react"

API リファレンス

詳細については、Base UI Scroll Area のドキュメントを参照してください。