局部滚动需满足“有高度、可溢出、不塌陷”三条件，否则scrollTop恒为0；flex布局中需设min-height:0或flex-shrink:0防压缩；scroll事件须绑定到具体滚动容器并确认scrollHeight>clientHeight。

局部滚动不是加个 overflow: auto 就能动的——它必须满足「有高度、可溢出、不塌陷」三个硬条件，否则 scrollTop 永远是 0，滚动条也不出现。

为什么 div 设了 overflow-y: auto 却滚不动

最常见原因是容器没真正获得「滚动上下文」。浏览器只对具备明确可视区域边界的元素启用滚动机制。

• height 或 max-height 必须是确定值（如 300px、50vh、20rem），不能靠 min-height 或内容撑开
• 父级若为 display: flex，子项默认 flex-shrink: 1，可能被压缩到高度为 0；加 flex-shrink: 0 或给容器设 min-height: 0（对 flex item）
• 避免用 overflow: hidden「掩盖」问题——它直接关掉滚动能力，不是隐藏滚动条
• 移动端 WebView 或含 transform/filter 的父级，可能隔离滚动上下文，导致 offsetTop 失准

如何让 .content 区域独立滚动（带动态 header）

不用 position: absolute，也不用预估 header 高度，纯 CSS 可解。

• 外层容器设 display: flex; flex-direction: column;
• .header 不设高度，由内容决定，加 flex-shrink: 0 防压缩
• .content 设 flex: 1; overflow-y: auto; min-height: 0; ——min-height: 0 是关键，否则 flex item 默认最小高度会阻止滚动触发
• 不给外层设 height，只约束 .content 的可用空间，header 高度完全自由

JS 控制局部滚动位置时别踩这些坑

用 scrollTo() 或 scrollBy() 是主流做法，但直接套用容易失效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 必须确认目标元素在容器内：container.contains(target)，否则白调用
• 别用 element.scrollIntoView() 直接调——它默认滚整个视口；要滚局部，得写 target.scrollIntoView({ block: 'start', behavior: 'smooth' }) 并确保 target 是 container 的后代
• 相对滚动优先用 container.scrollBy({ top: 40, behavior: 'smooth' })，比手动算 scrollTop 更稳（不受初始状态、重排、缩放影响）
• Safari 15.4 以下不支持 behavior: 'smooth' 在局部容器中生效，降级为 behavior: 'auto' 或直接省略

监听局部 scroll 事件总没反应？先查这三件事

绑定 scroll 事件前，得确保它真能触发。

• 检查 container.scrollHeight > container.clientHeight，否则根本没滚动空间
• 不要绑在 window 上——必须是那个带 overflow-y: auto 的具体元素
• Vue/React 中用 ref 获取容器后，等 mounted 或 useEffect 执行完再绑定，否则 DOM 尺寸可能是 0
• 节流用 requestAnimationFrame，别在回调里反复读 getBoundingClientRect()，否则卡死

真正麻烦的不是怎么写，而是高度计算被父级 flex/grid/transform/contain 等样式悄悄干扰——调试时第一反应不该是改 JS，而是打开 DevTools 看一眼该容器的 computed height 和 scrollHeight 是否合理。