根本原因是父级div未设高度约束导致子容器无限撑高，overflow-y: auto失效；需确保父级有height/max-height，子级设overflow-y: auto且避免height: 100%。
为什么嵌套的 div 加了 overflow-y: auto 还是整页滚动？
根本原因不是属性写错了，而是滚动容器（子 div）没有“被框住”——它的父级 div 没设高度约束，导致子容器无限撑高，overflow 失去生效前提。
常见翻车点：
- 父
div用了display: flex或display: grid，但没配height/max-height，子项默认“尽力撑满” - 父级只写了
min-height，内容一多就溢出，overflow压根不触发 - 子
div写了height: 100%，但父级高度未定义，结果算出来是 0 - 父级有
transform、filter或contain: paint，创建了新层叠上下文，间接干扰滚动上下文建立
div 嵌套中滚动容器该设哪些关键样式？
不是堆属性，而是堵住泄漏点。以下组合在 Chrome/Firefox/Safari（15.4+）中稳定生效：
- 父
div必须有明确高度：用height: 400px、max-height: 60vh或flex: 0 0 400px（若在 Flex 容器中） - 子
div（即滚动区）设overflow-y: auto，显式写overflow-y比overflow: auto更稳妥，避免误触水平滚动 - 若父级是
display: flex; flex-direction: column，子滚动div要加flex-shrink: 0，否则会被压缩到无高度 - 避免在子
div上写height: 100%；改用max-height: 100%+ 父级overflow: hidden更可靠
父子层级里 scrollTop 读出来总是 0 怎么办？
这是最典型的“假失效”：DOM 看似有滚动条，但 scrollTop 恒为 0，说明浏览器根本没把它当滚动容器——本质还是高度没锁死。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
排查顺序：
- 检查父级是否真有
height或max-height（用 DevTools 的 Computed 面板看实际渲染高度，不是看 Styles） - 检查子
div的scrollHeight是否大于clientHeight；如果相等或更小，说明内容没溢出，滚动自然无效 - 若用了
display: contents或visibility: hidden在子项上，会破坏高度计算，临时删掉测试 - 在 Flex 布局中，确认子项没被
flex-basis或align-self拉偏，导致视觉可见但布局高度为 0
用 JavaScript 控制局部滚动时，scrollIntoView 和 scrollTo 怎么选？
直接用 scrollTo。别绕路。
scrollIntoView 是为“让某个元素进视口”设计的，不是为“把容器滚回顶”；强行用它，得先塞一个 <div id="top-anchor"></div> 在顶部，再调用 anchor.scrollIntoView()，多一层 DOM 依赖，且在 React/Vue 动态列表里容易因锚点未挂载而静默失败。
正确做法：
- 获取滚动容器：
const container = document.querySelector('.scroll-container') - 回顶：
container.scrollTo({ top: 0, behavior: 'smooth' }) - 注意：不要写
container.scrollTop = 0再加behavior——scrollTop赋值不支持平滑，仅同步跳转 - Safari 15.3 及更早版本不支持
behavior: 'smooth'，可降级为{ top: 0, behavior: 'auto' }或直接container.scrollTop = 0
真正容易被忽略的是：所有这些操作的前提，是父级高度和子容器 overflow 已同时到位。否则 JS 调用再准，也滚不动。
