scroll-areas

滚动区域

默认情况下避免使用滚动区域

布局中的滚动容器——面板、抽屉、表格、带有内部溢出内容的模态框——会造成阻碍。用户必须发现某个区域可以滚动，同时管理多个独立的滚动位置，并在同一屏幕上的不同滚动区域之间切换上下文。

默认做法：让页面滚动。 单个页面级滚动人人都熟悉，无需摸索。引入内部滚动区域之前，先考虑能否调整布局，让页面本身处理溢出内容。

内部滚动的替代方案：

• 长列表使用分页或“加载更多”
• 长详情面板使用可折叠区域（手风琴）
• 对于原本会占满滚动区域的内容，使用单独的页面或路由
• 渐进式呈现——默认显示较少内容，按需展开

何时适合使用滚动区域

某些布局确实需要内部滚动：

• 固定高度的侧边栏，其中导航树比视口更长
• 数据表格，其中表头必须保持可见，而行可以滚动
• 聊天或日志面板，其中内容流是连续的，周围布局保持固定
• 嵌入更大应用外壳中的代码编辑器或终端窗格

遇到这些情况时，可以使用内部滚动，但要遵守以下限制。

只能沿一个轴滚动

绝不要创建同时沿两个轴滚动的容器。双轴滚动会让人困惑、难以精确控制，在触摸设备上几乎无法使用。

/* One axis: vertical */
overflow-y: auto;
overflow-x: hidden;

/* One axis: horizontal (e.g. wide table) */
overflow-x: auto;
overflow-y: hidden;

/* Never */
overflow: auto; /* allows both axes */

如果内容需要双轴滚动——例如受限面板中的宽表格——请调整布局，让表格的水平滚动成为该视图中唯一的滚动，并确保页面此时不滚动。

始终由用户控制

未经用户操作，绝不能自动滚动。具体来说：

• 禁止自动滚动，不得在用户未发起操作时移动视口
• 禁止劫持滚动——不要拦截原生滚动事件来人为地设置滚动动画或速度
• 仅当恢复之前的滚动位置时，才可以在加载时滚动到指定位置（例如离开列表后返回列表）
• 响应用户操作时，可以滚动到错误或锚点位置（例如提交包含错误的表单，或点击目录链接）

例外：聊天和日志面板可以在有新内容时自动滚动到底部，但前提是用户当前已在底部。如果用户向上滚动阅读，不要强行将其拉回底部——应改为显示“有新消息”提示。

滚动提示

用户必须能够在尝试滚动之前看出某个区域可以滚动。

• 在边缘处视觉裁切内容——露出部分项目，表示“还有更多内容”
• 使用不显眼的滚动条（不要使用 scrollbar-width: none），让滚动轨道可见
• 在触摸设备上，边缘处露出的部分项目是主要提示——确保容器在内容末端的边缘没有设置 overflow: hidden

检查清单

• 每个内部滚动区域是否确有必要，还是可以调整布局以使用页面滚动？
• 每个滚动容器是否只沿一个轴滚动？
• 是否避免在所有滚动容器上使用 overflow: auto（双轴）？
• 滚动是否始终由用户发起——没有劫持，也没有强制自动滚动？
• 可滚动区域在视觉上是否明显（部分内容、可见滚动条）？
• 在触摸设备上，滚动是否平滑且采用原生行为（-webkit-overflow-scrolling: touch 或等效方式）？