Radix 首页
WorkOS 出品
Radix 首页
WorkOS 出品
主题主题PrimitivesPrimitives图标图标颜色颜色
文档案例研究博客
组件

滚动区域

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

import * as React from "react";

import { ScrollArea } from "radix-ui";

import "./styles.css";



const TAGS = Array.from({ length: 50 }).map(

	(_, i, a) => `v1.2.0-beta.${a.length - i}`,

);



const ScrollAreaDemo = () => (

	<ScrollArea.Root className="ScrollAreaRoot">

		<ScrollArea.Viewport className="ScrollAreaViewport">

			<div style={{ padding: "15px 20px" }}>

				<div className="Text">Tags</div>

				{TAGS.map((tag) => (

					<div className="Tag" key={tag}>

						{tag}

					</div>

				))}

			</div>

		</ScrollArea.Viewport>

		<ScrollArea.Scrollbar
			className="ScrollAreaScrollbar"
			orientation="vertical"
		>

			<ScrollArea.Thumb className="ScrollAreaThumb" />

		</ScrollArea.Scrollbar>

		<ScrollArea.Scrollbar
			className="ScrollAreaScrollbar"
			orientation="horizontal"
		>

			<ScrollArea.Thumb className="ScrollAreaThumb" />

		</ScrollArea.Scrollbar>

		<ScrollArea.Corner className="ScrollAreaCorner" />

	</ScrollArea.Root>

);



export default ScrollAreaDemo;

特性

    滚动条位于可滚动内容之上，不占用空间。

    滚动是原生的；没有通过 CSS 转换实现的底层位置移动。

    仅在与控件交互时填充指针行为，因此键盘控件不受影响。

    支持从右到左方向。

安装

从命令行安装此组件。

npm install @radix-ui/react-scroll-area

anatomy

导入所有部件并将它们组装在一起。

import { ScrollArea } from "radix-ui";



export default () => (

	<ScrollArea.Root>

		<ScrollArea.Viewport />

		<ScrollArea.Scrollbar orientation="horizontal">

			<ScrollArea.Thumb />

		</ScrollArea.Scrollbar>

		<ScrollArea.Scrollbar orientation="vertical">

			<ScrollArea.Thumb />

		</ScrollArea.Scrollbar>

		<ScrollArea.Corner />

	</ScrollArea.Root>

);

API 参考

根元素

包含滚动区域的所有部件。

属性类型默认值
asChild
布尔值
false
类型
枚举
"hover"
scrollHideDelay
数字
600
dir
枚举
无默认值
nonce
字符串
无默认值

Viewport

滚动区域的视口区域。

属性类型默认值
asChild
布尔值
false

滚动条

垂直滚动条。添加第二个 Scrollbar 并带有 orientation 属性以启用水平滚动。

属性类型默认值
asChild
布尔值
false
forceMount
布尔值
无默认值
orientation
枚举
vertical
数据属性值
[data-state]"visible" |"hidden"
[data-orientation]"vertical" |"horizontal"

滑块

在 ScrollArea.Scrollbar 中使用的滑块。

属性类型默认值
asChild
布尔值
false
数据属性值
[data-state]"visible" |"hidden"

角落

垂直和水平滚动条相遇的角落。

属性类型默认值
asChild
布尔值
false

可访问性

在大多数情况下，最好依赖原生滚动并使用 CSS 中提供的自定义选项。当这不足以满足需求时，ScrollArea 提供了额外的可定制性，同时保持了浏览器的原生滚动行为（以及辅助功能，例如键盘滚动）。

键盘交互

默认情况下支持通过键盘滚动，因为该组件依赖于原生滚动。特定平台的键盘交互可能有所不同，因此我们在此处不指定它们，也不添加特定的事件监听器来处理通过按键事件进行的滚动。

上一个单选按钮组
下一个选择框
在 GitHub 上编辑此页。