局部滚动容器必须设固定高度（如height或max-height），否则overflow-y: auto无效且scrolltop恒为0；需确保容器有明确可视边界，避免flex压缩、transform干扰等导致无法滚动。

局部滚动容器必须设固定高度 + overflow-y

没高度的 div 写了 overflow-y: auto 也滚不起来，scrollTop 永远是 0。浏览器只对“有明确可视区域边界”的容器启用滚动上下文。

• 必须用 height 或 max-height（推荐 px、vh、rem），不能靠 min-height 或内容撑开
• overflow-y: auto 比 overflow: auto 更稳妥，避免误触水平滚动条
• 若父级是 flex 容器，子项要加 flex-shrink: 0，否则可能被压缩到无高度
• 别用 overflow: hidden 试图“隐藏多余”，它直接禁掉滚动能力

用 scroll-behavior: smooth 开启平滑滚动

这个属性必须加在滚动容器本身上，不是 html 或 body —— 后者只影响整页滚动。

• 写法：.scroll-container { height: 400px; overflow-y: auto; scroll-behavior: smooth; }
• 只对 scrollTo()、scrollIntoView() 和锚点跳转生效，对直接赋值 scrollTop 无效
• 用户开启系统“减少运动”偏好时自动降级，这是预期行为，不用绕过
• iOS Safari 15.4 之前有 bug，scrollIntoView({ behavior: 'smooth' }) 在局部容器里可能卡住，此时建议改用 container.scrollTo()

监听局部 scroll 事件要绑对目标

别监听 window，得监听那个带 overflow-y: auto 的具体容器元素。

Article To Html

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

下载

• 先确认它真能滚：console.log(container.scrollHeight, container.clientHeight, container.scrollTop) —— 如果前两者相等或 scrollTop 始终为 0，说明没形成可滚动空间
• 移动端 WebView 中，若容器用了 transform 或 will-change，可能拦截滚动事件，需实测
• 节流很重要：滚动中高频读取 scrollTop 会强制同步 layout，极易掉帧；推荐用 requestAnimationFrame 包一层再读
• Vue/React 中要在 mounted 或 useEffect DOM 渲染完成后再绑定，否则尺寸可能是 0

JS 控制滚动位置要避免全局跳转

点击链接默认触发整页滚动，必须拦截并重定向到局部容器。

• 不要直接调 element.scrollIntoView() —— 它默认作用于根视口；应调 container.scrollIntoView({ block: 'start', behavior: 'smooth' })，且确保 container 是那个局部滚动元素
• 更可靠的是计算偏移后用 container.scrollTo()：container.scrollTo({ top: target.offsetTop - container.offsetTop, behavior: 'smooth' })
• 务必校验 container.contains(target)，防止目标不在该容器内却强行滚动
• 用 scrollBy() 实现按钮步进滚动比维护 scrollTop 更稳，它是相对位移，不受初始状态和重排干扰

实际最常卡住的地方不是语法写错，而是容器高度没真正落实——比如父级 height: 100% 但祖先没给高度，或者 flex 子项被压缩塌陷。调试时第一件事就是打开控制台，盯着那三个值：scrollHeight、clientHeight、scrollTop。

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