局部滚动失效主因是css或dom结构未满足滚动前提条件：容器需有明确高度且overflow-y生效，父级不能透传溢出，flex布局中需设overflow:hidden或显式高度，fixed定位会破坏文档流高度，移动端需正确配置touchmove passive选项。

局部滚动失效，八成是容器根本没被浏览器识别为可滚动区域——不是JS写错了，而是CSS或DOM结构卡在了关键门槛上。

滚动容器高度不足或溢出未启用

最常见原因：容器 height 或 max-height 没设，或 overflow-y 被父级截断。

• overflow-y: auto 只在内容高度 > 容器高度时才触发滚动；若容器 height: auto 或未设高度，它会无限撑开，永远不出现滚动条
• 父级元素（如 flex 容器、position: relative 包裹层）若没设 overflow: hidden 或明确高度，会“透传”溢出，导致子容器的 overflow 失效
• 检查 DevTools 的 Computed 面板，确认容器最终生效的 overflow-y 是 auto 或 scroll，且 scrollHeight > clientHeight

Flex 布局中局部滚动突然“消失”

Flex 容器默认拉伸子项，常把本该可滚动的区域直接撑满，让 overflow 形同虚设。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 滚动容器的**直接父级**必须加 overflow: hidden 或显式 height/max-height
• 滚动容器自身避免用 height: 100%；改用 flex: 0 0 auto 或 max-height: 100%（前提是父级已设高度且 overflow: hidden）
• 若父容器是 flex-direction: column，滚动区作为子项时，需加 align-self: stretch 或 height: 0 + flex: 1 才能正确分配空间

fixed 定位元素破坏全局滚动上下文

页面整体无法滚动，但局部容器也跟着“瘫痪”，往往是因为 position: fixed 把关键布局节点抽离了文档流。

• 所有 position: fixed 元素都不参与父容器高度计算； 实际高度可能只剩几像素，导致滚动条无作用范围
• 修复不是加 overflow，而是把误用 fixed 的元素改为 position: relative 或 static，让它们重新撑开容器
• 若需视觉固定效果（如参考线），改用 ::before/::after 伪元素或 transform: translate()，不破坏文档流

移动端 touchmove 误拦截导致滚动冻结

在 iOS 或安卓上点按后无法滑动，大概率是 JS 在遮罩层上无差别调用了 e.preventDefault()。

• touchmove 监听器必须显式声明 { passive: false }，否则 preventDefault() 无效，但浏览器仍会禁用原生滚动
• 只对非可滚动区域拦截：用 e.target.closest(".scrollable-area") 判断目标是否在允许滚动的子容器内，匹配到就跳过 preventDefault()
• DOM 层级过深（>6 层）会导致 touchmove 延迟，建议扁平化结构，或给滚动容器加 will-change: scroll-position

真正卡住局部滚动的，往往不是某个属性写错，而是多个约束条件没同时满足——比如 flex 父级没设 overflow: hidden，又忘了给子容器加 max-height，再叠加上 position: fixed 的干扰，三者一碰，滚动就彻底静音了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！