局部滚动需满足“有高度、可溢出、不塌陷”三条件，否则scrollTop恒为0；容器须设height/max-height，内容须真正溢出，且避免transform等隔离滚动上下文。
局部滚动不是加个 overflow-y: auto 就能动的——它必须满足「有高度、可溢出、不塌陷」三个硬条件，否则 scrollTop 恒为 0，滚动条也不出现。
容器必须设明确高度（height 或 max-height）
浏览器只对具备可视区域边界的元素启用滚动机制。没有固定尺寸，就无“溢出”可言。
-
height: 300px、max-height: 50vh、max-height: 20rem都行；min-height不触发滚动上下文 - 用百分比（如
height: 80%）时，父级必须有明确高度（不能是auto或仅靠内容撑开） - Flex 子项若没设
flex-shrink: 0，可能被压缩到高度为 0；此时加min-height: 0更稳妥 - 绝对定位容器中，
max-height: 100%通常失效，需改用max-height: 0; flex: 1;配合父级display: flex
确保内容真正溢出且不被父级干扰
即使写了 overflow-y: auto，如果内容没“越界”，滚动条也不会出现。
- 检查
container.scrollHeight > container.clientHeight—— 这是滚动空间存在的铁证 - 富文本里含
<img>、<table>或长 URL 时，加max-width: 100%和word-break: break-word，否则横向撑破导致垂直方向“看似没溢出” - 父级有
transform、filter或will-change时，可能隔离滚动上下文，使offsetTop失准；建议改用getBoundingClientRect()计算位置 - 不要用
overflow: hidden“掩盖”问题——它直接裁掉内容，不是隐藏滚动条
Flex 布局中滚动容器容易塌陷的修复
Flex 默认会拉伸子项高度，这是局部滚动失效最常见原因。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 外层设
display: flex; flex-direction: column;，.header加flex-shrink: 0，.content加flex: 1; overflow-y: auto; min-height: 0; - 别依赖
height: 100%—— 在 Flex 中它常被忽略；优先用flex: 1+min-height: 0 - 若滚动区是 Grid 子项，同样要防
grid-row自动拉伸，加min-height: 0或显式max-height - 移动端 WebView 或某些安卓浏览器中，需额外加
-webkit-overflow-scrolling: touch启用原生滚动惯性
JS 控制滚动时的关键校验点
调用 scrollTo 或 scrollBy 前，不确认状态就动手，大概率白忙活。
- 先执行
container.contains(target)，防止目标不在该容器内 - 用
container.scrollBy({ top: 40, behavior: 'smooth' })比手动算scrollTop更稳——不受初始缩放、重排、subpixel 渲染影响 - Safari 15.4 以下不支持
behavior: 'smooth'在局部容器中生效，降级为behavior: 'auto'或省略 - 监听
scroll事件前，务必确认scrollHeight > clientHeight，否则事件根本不会触发
最容易被忽略的是：滚动是否真由这个容器自己承载。很多“滚不动”的问题，根源是父级用了 transform、contain: paint 或嵌套了 iframe，悄悄把滚动上下文隔离了——这时再调 scrollTo 也没用。
