可滚动区域
@astryxdesign/core v0.7.1 · ScrollableArea
使用方法
ScrollableArea 是一个原生滚动视口，里面有一块被观察的内容盒。只有请求的轴确实溢出时，它才会进入 Tab 顺序。label 必填。
<script setup lang="ts">
import { ScrollableArea } from '@astryx-vue/core/ScrollableArea'
</script>
<template>
<ScrollableArea label="笔记" :height="240">
<p>很长的内容</p>
</ScrollableArea>
</template>axis 取 block（默认）、inline 或 both。组件按书写模式和方向把逻辑轴映射到物理轴。overscroll 取 allow 或 contain。stickyContainment 取 whenScrollable 或 always。内边距写在内容盒上，默认是 0。isFullBleed 让视口逃出祖先的内边距，内容的内边距不变。
溢出还没量到时，请求的轴用 overflow: clip。量到溢出后，溢出的轴改成 auto。always 即使内容装得下，也把这个视口留作 sticky 边界。容差是 1px。
视口和内容盒已经存在时，用 useScrollableArea 做同样的测量。useScrollOverflow 报告一个横向滚动容器的起始边和结束边有没有被挡住。
配合 ScrollbarsProvider
外层套了 ScrollbarsProvider 时，ScrollableArea 会自动换成自绘的覆盖式滚动条，不用改任何代码。不套就还是原生滚动条。
某一块想保留原生滚动条，给它写 :scrollbars="false"。
解剖
| 部分 | 说明 |
|---|---|
| 视口 | 根上的原生滚动容器。它拥有无障碍名称，生效时是焦点目标，也是 astryx-scrollable-area 主题目标。 |
| 内容盒 | 和视口一起被观察的真实内层布局盒。行内滚动时，行内尺寸用 max-content，最小为 100%。 |
最佳实践
| 指引 | 实践 |
|---|---|
| 推荐 | 每块区域都写短标签，说明键盘用户会滚到什么。 |
| 推荐 | 没有特别要求时保持 overscroll="allow"。只有嵌套区域需要停住手势时才用 contain。 |
| 避免 | 再套一层 overflow 容器。滚动只交给这一个视口。 |
| 避免 | 藏起滚动条，却不提供别的办法到达溢出的内容。 |
示例
横向滑轨
Workspace files
Recently openedaxis 为 inline 时卡片横向滚动。isFullBleed 让轨道贴到面板边缘，第一张卡片仍和标题对齐。
过度滚动
Workspace files
Two sections, two edge policiesoverscroll allow 把已经滚到底的手势交给后面的面板。contain 则停在这一节的边缘。
粘性分组标题
Workspace files
12 files across 3 sections滚动视口是粘性定位的包含块，分组标签会钉在列表顶部。
粘性穿透
Workspace files
18 files across 3 sections内容放得下的一节会把粘性标签交出去。下一节用 stickyContainment always 把标签留在自己的盒子里。
双轴看板
Workspace board
16 files across 4 sectionsaxis 为 both 时，内容在行向上按 max-content 排布，一块看板可以同时横竖滚动。