Radix 主页
由 WorkOS 制作
Radix 主页
由 WorkOS 制作
主题主题组件组件图标图标颜色颜色
文档案例研究博客
组件

滚动区域

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

import React from 'react';

import * as ScrollArea from '@radix-ui/react-scroll-area';

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

结构

导入所有部分并将其组合在一起。

import * as ScrollArea from '@radix-ui/react-scroll-area';



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
type
枚举
"hover"
scrollHideDelay
数字
600
dir
枚举
没有默认值
nonce
字符串
没有默认值

视窗

滚动区域的视窗区域。

属性类型默认值
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 上编辑此页面。