设计布局、数据表、面板或模态框时，避免内部滚动区并保证单轴…

在处理溢出内容或设计可能引入内部滚动容器的布局时，优先用页面滚动，必须内滚动时限制单轴并保持用户可控。

适用场景

解决思路

1. 默认让页面滚动；在引入内部滚动区前，先问布局能否重构为页面自身处理溢出。
2. 长列表避免内部滚动，改用分页或 load-more。
3. 长详情面板避免内部滚动，改用可折叠区域（accordion）。
4. 对本来会填满滚动区的内容，改用单独页面或路由。
5. 采用渐进披露：默认显示更少，按需展开。
6. 必须内滚动时，仅限真正需要的布局（固定高度侧边栏中的长导航树、需表头固定的数据表格、连续聊天/日志面板、嵌入应用壳的代码编辑器或终端窗格），并继续应用以下约束。
7. 每个滚动容器只允许一个滚动轴：纵向用 `overflow-y: auto; overflow-x: hidden;`，横向用 `overflow-x: auto; overflow-y: hidden;`。
8. 永远不要创建同时横向和纵向滚动的容器；不要使用 `overflow: auto` 允许双轴。
9. 如果内容需要双轴（例如受限面板中的宽表格），重构布局，使表格的水平滚动成为该视图唯一滚动，并让页面在该点不滚动。
10. 禁止未经用户意图的自动滚动，避免自动移动视口。
11. 禁止 scroll hijacking：不要拦截原生滚动事件来动画或人为控制速度。
12. 仅在恢复之前滚动位置时允许加载时 scroll-to（例如从别处导航回列表）。
13. 仅在响应用户操作时允许为错误或锚点 scroll-to（如提交带错表单、点击 table-of-contents 链接）。
14. 聊天/日志面板可在新内容到达时自动滚到底部，但仅当用户已经在底部；如果用户向上滚动阅读，不要强制拉回，改为显示「new messages」指示。
15. 用户必须能先看出区域可滚动：在边缘视觉裁切内容，用部分可见项暗示还有更多。
16. 使用 subtle scrollbar，不要用 `scrollbar-width: none`，让滚动轨道可见。
17. 触摸端把边缘部分可见项作为主要可滚动提示；确保容器尾边不要设置 `overflow: hidden`。
18. 按 review checklist 复查：每个内滚动区是否真必要或可重构为页面滚动；每个滚动容器是否单轴；是否避免 `overflow: auto`；滚动是否始终用户发起；可滚动区域是否视觉明显；触屏滚动是否平滑原生（`-webkit-overflow-scrolling: touch` 或等价）。

适用边界 · 注意事项

• 当布局能通过页面级滚动、分页/load-more、折叠面板、独立页面/路由或渐进披露解决溢出时，不要使用内部滚动区域。
• 不要在任何滚动容器上使用 `overflow: auto` 或创建双轴滚动，尤其触屏设备。
• 不要自动滚动、劫持滚动，或在用户已向上阅读时强制把聊天/日志拉回底部。