Scrollable Area Props

名称	类型	默认值	说明
axis	'inline' | 'block' | 'both'	'block'	允许滚动的逻辑轴。物理方向随书写模式和方向变化。
label	string	-	无障碍名称，必填。只有某一轴溢出时，视口才进入 Tab 顺序。
role	'group' | 'region'	'group'	这块命名视口的角色。
overscroll	'allow' | 'contain'	'allow'	滚到边缘后，手势要不要交给外层。只有这一轴确实溢出时才会收住。
stickyContainment	'whenScrollable' | 'always'	'whenScrollable'	whenScrollable 在内容装得下时把 sticky 交给外层。always 始终把这个视口留作 sticky 边界。
padding	SpacingStep	0	内容盒四边的内边距。
paddingInline	SpacingStep	-	内容盒的行向内边距，覆盖这一轴上的 padding。
paddingInlineStart	SpacingStep	-	内容盒的行起始边内边距。
paddingInlineEnd	SpacingStep	-	内容盒的行结束边内边距。
paddingBlock	SpacingStep	-	内容盒的块向内边距，覆盖这一轴上的 padding。
paddingBlockStart	SpacingStep	-	内容盒的块起始边内边距。
paddingBlockEnd	SpacingStep	-	内容盒的块结束边内边距。
isFullBleed	boolean	false	让视口逃出祖先的内边距。内容内边距保持不变。
scrollbars	boolean	true	外层有 ScrollbarsProvider 时，这块区域要不要换成自绘滚动条。设为 false 就保留原生滚动条。
width	number | string	-	视口宽度。数字按像素处理，字符串原样使用。
height	number | string	-	视口高度。数字按像素处理，字符串原样使用。
maxWidth	number | string	-	视口最大宽度。
minHeight	number | string	-	视口最小高度。

SpacingStep 的取值是 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10。

插槽

名称	说明
default	放进被观察的内容盒。行向和双轴模式会把内容盒的行向尺寸设成 max-content。

useScrollableArea

组件自己已经有视口和内容盒时，从 @astryx-vue/core 引入。选项是 axis、label、role、overscroll、stickyContainment。返回 viewport（回调 ref）、content、viewportAttrs、viewportStyle 和 state。

溢出容差是 1px。还没量到时，请求的轴是 overflow: clip。量到溢出后，溢出的轴改成 auto。

useScrollOverflow

useScrollOverflow() 观察一个横向滚动容器。把 scrollRef 绑到元素上。overflowStart、overflowEnd、hasOverflow 都是 ref。容差是 1px。

原生属性

ScrollableArea 渲染 <div>。

以下内容落到视口上：

• HTML 属性。
• aria-* 属性。
• data-* 属性。
• class。
• style。

class 会合并。视口还写 data-scroll-axis，测量之后再写 data-scrollable-* 以及 data-scroll-*-start / data-scroll-*-end。