xiaoye-components

Appearance

Scrollbar 滚动条 ​

xy-scrollbar 用于在固定区域里承载列表、说明块、卡片带和横向泳道。它保留原生滚动行为，同时提供更稳定的滚动条样式、方法控制和滚动事件。

基础用法 ​

适合固定高度的说明区、可滚动卡片列和侧边详情块。

规则块 1

用于演示固定高度下的纵向滚动,适合侧栏说明区、筛选说明块和卡片列表。

规则块 2

用于演示固定高度下的纵向滚动,适合侧栏说明区、筛选说明块和卡片列表。

规则块 3

用于演示固定高度下的纵向滚动,适合侧栏说明区、筛选说明块和卡片列表。

规则块 4

用于演示固定高度下的纵向滚动,适合侧栏说明区、筛选说明块和卡片列表。

规则块 5

用于演示固定高度下的纵向滚动,适合侧栏说明区、筛选说明块和卡片列表。

规则块 6

用于演示固定高度下的纵向滚动,适合侧栏说明区、筛选说明块和卡片列表。

规则块 7

用于演示固定高度下的纵向滚动,适合侧栏说明区、筛选说明块和卡片列表。

规则块 8

用于演示固定高度下的纵向滚动,适合侧栏说明区、筛选说明块和卡片列表。

最大高度与常显滚动条 ​

max-height 适合内容高度不确定的区块，always 适合始终提示“这里可以滚动”的场景。

说明 1 always 模式会始终显示自定义滚动条，适合可预期会滚动的说明区域。
说明 2 always 模式会始终显示自定义滚动条，适合可预期会滚动的说明区域。
说明 3 always 模式会始终显示自定义滚动条，适合可预期会滚动的说明区域。
说明 4 always 模式会始终显示自定义滚动条，适合可预期会滚动的说明区域。
说明 5 always 模式会始终显示自定义滚动条，适合可预期会滚动的说明区域。
说明 6 always 模式会始终显示自定义滚动条，适合可预期会滚动的说明区域。

横向滚动 ​

xy-scrollbar 也支持横向内容，适合时间轴、卡片带和泳道布局。

列 1

横向滚动适合时间轴、统计卡片带和可拖动泳道。

列 2

横向滚动适合时间轴、统计卡片带和可拖动泳道。

列 3

横向滚动适合时间轴、统计卡片带和可拖动泳道。

列 4

横向滚动适合时间轴、统计卡片带和可拖动泳道。

列 5

横向滚动适合时间轴、统计卡片带和可拖动泳道。

列 6

横向滚动适合时间轴、统计卡片带和可拖动泳道。

方法与事件 ​

通过组件暴露的方法可以主动控制滚动位置，scroll 与 endReached 适合做滚动联动和触底加载。

scrollTop：0未触底
第 1 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 2 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 3 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 4 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 5 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 6 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 7 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 8 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 9 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 10 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 11 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。
第 12 条说明：用于演示 `scroll` 事件、`endReached` 触发和方法控制。

宽表格容器 ​

后台表格经常会遇到列很多、宽度超过容器的情况。把 xy-table 放进 xy-scrollbar 里，可以让横向滚动区域更可控。

长筛选面板 ​

侧边筛选、规则面板和高级条件配置区也很适合配合 Scrollbar，把“长内容的滚动”局部化。

业务线业务线
每个分组都可以承载自己的说明、输入框和状态标签。
区域区域
固定高度的筛选抽屉、侧边栏和高级筛选面板都很适合配合 Scrollbar。
负责人负责人
如果筛选项很多，外层面板滚动会比让整个页面滚动更容易控制上下文。
部署环境部署环境
这种模式也适合和 Form、Input、DatePicker 等组件组合成密集录入区。

何时使用 ​

  • 需要在固定高度区域中承载较长列表或说明文案。
  • 需要统一滚动条视觉，避免原生滚动条在不同系统下差异过大。
  • 需要通过方法控制滚动位置，或监听滚动与触底行为。

Scrollbar API ​

Scrollbar Attributes ​

属性说明类型默认值
distance触发 endReached 的距离阈值，单位 pxnumber0
height固定高度number | string''
max-height最大高度number | string''
native是否使用原生滚动条booleanfalse
wrap-style滚动容器样式StyleValue''
wrap-class滚动容器类名string | string[]''
view-style视图容器样式StyleValue''
view-class视图容器类名string | string[]''
noresize是否跳过尺寸监听booleanfalse
tag视图容器标签string'div'
always是否始终显示自定义滚动条booleanfalse
min-size滚动条 thumb 最小尺寸number20
tabindex滚动容器 tabindexnumber | string—
id视图容器 idstring—
role视图容器 rolestring—
aria-label视图容器 aria-labelstring—
aria-orientation视图容器 aria-orientationScrollbarProps["ariaOrientation"]—

Scrollbar Events ​

事件说明参数
scroll滚动时触发ScrollbarScrollPayload
endReached滚动接近边界时触发ScrollbarDirection

Scrollbar Slots ​

插槽说明
default滚动内容

Scrollbar Exposes ​

暴露项说明类型
wrapRef滚动容器引用ScrollbarInstance["wrapRef"]
update手动更新滚动条状态ScrollbarInstance["update"]
scrollTo滚动到指定位置ScrollbarInstance["scrollTo"]
setScrollTop设置纵向滚动位置ScrollbarInstance["setScrollTop"]
setScrollLeft设置横向滚动位置ScrollbarInstance["setScrollLeft"]
handleScroll手动触发滚动同步ScrollbarInstance["handleScroll"]

行为约定 ​

  • native=false 时会隐藏原生滚动条并渲染自定义 thumb。
  • native=true 时只保留滚动容器本身，不渲染自定义滚动条。
  • trailing / leading 这类复杂滚动吸附不在当前组件职责内，更适合由业务层处理。