106k
New

滚动区域

PreviousNext

增强原生滚动功能，实现自定义的跨浏览器样式。

Radix UIBase UI
import * as React from "react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

安装

pnpm dlx shadcn@latest add scroll-area

使用方法

import { ScrollArea } from "@/components/ui/scroll-area"
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  在这里放置你的可滚动内容。
</ScrollArea>

示例

水平滚动

使用带有 orientation="horizontal" 的 ScrollBar 实现水平滚动。

import * as React from "react"
import Image from "next/image"
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

API 参考

请参阅 Base UI 滚动区域 文档。