局部滚动容器必须设固定高度或max-height并配overflow-y: auto才能生效，flex子项需加flex-shrink: 0，scroll事件须绑定在容器上，scrollto/scrollby最可靠，平滑滚动需直接设在容器上。
局部滚动容器必须设固定高度 + overflow-y: auto
没高度就滚不动，这是最常卡住的地方。浏览器只对有明确 height 或 max-height 的容器启用滚动上下文，min-height、height: 100%（父级无高时）或靠内容撑开都不行。
- 推荐用
px、vh或rem，比如height: 300px或max-height: 70vh - 写
overflow-y: auto比overflow: auto更稳妥，避免意外触发水平滚动条 - 如果容器是 Flex 子项，加
flex-shrink: 0防止被压缩塌陷 - 别用
overflow: hidden试图“隐藏多余”，它直接关掉滚动能力
监听 scroll 事件必须绑在容器上，不是 window
container.addEventListener('scroll', handler) 才有效；绑在 window 上监听不到局部滚动。但前提是容器真能滚——得先满足上一条的高度 + overflow 条件。
- 调试时先打日志：
console.log(container.scrollHeight, container.clientHeight, container.scrollTop)，如果前两者相等或scrollTop始终为 0，说明根本没形成可滚动空间 - 移动端 WebView 中，若容器用了
transform或will-change，可能拦截 scroll 事件，需实测验证 - Vue/React 中用
ref获取容器后，要等mounted/useEffect完成、DOM 渲染完毕再绑定，否则尺寸可能是 0
用 scrollTo() 或 scrollBy() 控制滚动位置，别依赖 scrollIntoView()
对局部容器调用 scrollTo() 是回顶、跳转到指定位置最直接的方式；scrollBy() 更适合按钮驱动的步进滚动，它基于当前位移，不依赖初始状态，连点或重排后仍稳定。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 回顶部：
container.scrollTo({ top: 0, behavior: 'smooth' })；Safari 15.4 以下降级为behavior: 'auto'或直接container.scrollTo(0, 0) - 向下滚一段：
container.scrollBy({ top: 40, behavior: 'smooth' })，比手动算scrollTop更可靠 - 避免用
element.scrollIntoView()实现局部回顶——它默认滚整个视口，强行用于局部需额外挂锚点元素，多一层 DOM 依赖且易失败 - 手动改
scrollTop时，边界判断要用小数容差：container.scrollTop 判顶，<code>container.scrollTop > container.scrollHeight - container.clientHeight - 0.5判底
平滑滚动要设在容器本身，不是 html 或 body
scroll-behavior: smooth 必须加在那个带 overflow-y: auto 的容器上，设在 html 或 body 上会影响全页滚动，和你要的“局部”目标冲突。
- 生效前提：该容器已满足可滚动条件（有高 + overflow），否则属性无效
- iOS Safari 15.4 之前，
scrollIntoView({ behavior: 'smooth' })在局部容器里可能失效，此时只能降级或 JS 动画模拟 - 用户开启系统级“减少运动”偏好（
prefers-reduced-motion: reduce）时，该属性自动禁用，这是正确行为，不用绕过 - 如果滚动后立刻被 JS 覆盖（比如重置
scrollTop），平滑效果会被打断
滚动容器的“可滚动性”不是开关式配置，而是由高度、溢出、内容三者共同决定的连续状态；任何一个环节松动，scrollTop 就归零，所有 JS 操作都成空转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
