111k
新建

Scroll Area

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, ScrollBar } from "@/components/ui/scroll-area"
<ScrollArea className="h-50 w-87.5 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"

RTL

要在 shadcn/ui 中启用 RTL 支持，请参见 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

请参见 Base UI Scroll Area 文档。