🌐 Nodejs.cn
新建

滚动区域

PreviousNext

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

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

安装

🌐 Installation

pnpm dlx shadcn@latest add scroll-area

用法

🌐 Usage

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

示例

🌐 Examples

水平

🌐 Horizontal

将 ScrollBar 与 orientation="horizontal" 一起用于水平滚动。

🌐 Use ScrollBar with orientation="horizontal" for horizontal scrolling.

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

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

🌐 See the Base UI Scroll Area documentation.