滚动容器归属契约

大理论

知识库、素材库、dashboard 和 canvas 工具常同时有顶部导航、侧栏、结果区、sticky 搜索、局部列表和抽屉。若多个祖先节点都设置 height: 100vh、overflow: hidden 或 overflow: auto，页面可能出现无法滚动、双滚动条、sticky 失效、移动端内容被遮挡、键盘弹出后输入框不可见等问题。健康布局要先指定主滚动容器，再定义局部滚动例外。

小知识点

1. 页面级内容优先让 body/document 或一个明确 app shell 成为主滚动容器，不要多个同级区域抢滚动。
2. 只有列表、表格、代码块、侧栏菜单、弹窗内容等有明确边界的区域才使用局部滚动。
3. sticky 元素依赖最近滚动祖先；父级 overflow 会改变 sticky 参照，必须验证。
4. 移动端优先单列 reflow；除数据表、画布、地图等确需二维空间的内容外，避免横向滚动。
5. 抽屉/弹窗打开时锁 body scroll，但关闭后必须恢复；焦点和键盘视口要验证。
6. 验证不只看首屏，要测 scrollHeight > innerHeight、实际 wheel/touch scroll、底部内容可见和 320 CSS px reflow。

设计判断

如果桌面和移动端都能从顶部滚到底部，无隐藏内容、无意外双滚动条、sticky 行为稳定，且 320 CSS px 宽度下无需双向滚动读取正文，滚动契约成立。

实现建议

为每个长页面写 scroll map：pageScrollOwner、localScrollRegions、stickyElements、lockedStates、mobileReflow、keyboardRisk、overflowExceptions。CSS 中避免无理由的 height: 100vh 链；app shell 使用 min-height 与 overflow: visible，局部面板使用 min-height: 0 和明确 max-height。Playwright/浏览器验证时记录 document.scrollingElement.scrollHeight、window.scrollY、body/clientWidth 与关键容器 overflow。

反例/风险

页面主容器 overflow: hidden 但结果区很长；侧栏和结果区都可滚导致用户迷失；sticky 搜索在父级 overflow 下失效；移动端横向溢出造成 WCAG Reflow 风险；弹窗锁滚动后无法恢复；截图只截首屏没有测试滚到底。

案例分析

MDN 将 scroll container 定义为内容可在元素盒内滚动的容器，并说明 overflow 会决定溢出行为；W3C WCAG Reflow 要求放大或窄屏时内容不应依赖双向滚动读取；Awwwards 的 scrolling 案例常通过明确的页面滚动叙事和局部交互区分主线与特效。落到 Interface-Lab，知识库页面应让页面主内容自然纵向滚动，侧栏只在必要时局部滚动，不能让 app shell 隐藏全库内容。

来源链接

MDN Overflow: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow MDN Scroll container: https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container W3C WCAG Reflow: https://www.w3.org/WAI/WCAG21/Understanding/reflow.html Awwwards Scrolling Collection: https://www.awwwards.com/websites/scrolling/