局部滚动需设固定高度、overflow-y: auto 和 overflow-x: hidden；scrolltop 赋值前须用 math.max/min 截断边界；顶部/底部判断应加容差；推荐原生 scrollto({behavior: "smooth"})，禁用 jquery animate。
局部滚动必须设固定高度和 overflow-y
不设 height 和 overflow-y: auto，scrollTop 就是 0 或只读无效。很多新手写完 JS 却发现滚动没反应，八成卡在这一步。
关键 CSS 规则只有三行，缺一不可：
-
height: 300px（或max-height，但不能是auto） -
overflow-y: auto（scroll会强制显示滚动条，auto更自然） -
overflow-x: hidden（防横向溢出干扰视觉）
如果容器本身是 flex 项或 grid 子项，还要确认父容器没用 align-items: stretch 撑开它导致高度失效。
scrollTop 赋值前必须做边界判断
直接写 container.scrollTop += 50 看似简单，但滚到底部再点“向下”按钮，scrollTop 会卡在最大值，UI 失去反馈感，用户误以为按钮坏了。
正确做法是每次赋值前手动截断：
- 向上滚动：
container.scrollTop = Math.max(0, container.scrollTop - step) - 向下滚动：
container.scrollTop = Math.min(container.scrollHeight - container.clientHeight, container.scrollTop + step)
scrollHeight - clientHeight 才是可滚动的净高度，别用 offsetHeight 或 innerHeight 替代——它们不含滚动内容总高。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
滚动按钮禁用状态不能只靠 scrollTop === 0
顶部判断用 scrollTop === 0 看似合理，但在 iOS Safari 或某些缩放比例下，scrollTop 可能是 0.000001，导致按钮不该禁用却禁用了。
更稳的判断方式是加容差：
- 顶部：
container.scrollTop - 底部：
container.scrollTop + container.clientHeight >= container.scrollHeight - 1
同时记得在滚动事件里实时更新按钮 disabled 属性，别只在点击时判断一次。
不要用 jQuery animate 操作局部滚动
$("div.scroll-container").animate({ scrollTop: 200 }) 在现代项目里问题集中：动画跳变、移动端不触发、回调不执行、与 CSS transform 冲突。
原生方案更轻、更可控：
- 平滑滚动：用
container.scrollTo({ top: target, behavior: "smooth" })（注意不是scrollTop =） - 兼容性兜底：Safari 15.4 以下不支持
behavior: "smooth"，降级为behavior: "auto"或直接赋值scrollTop - 避免在
scroll事件中反复调用scrollTo，否则会触发重入和抖动
真正麻烦的不是怎么滚，而是滚完后要不要立刻禁用按钮、是否要同步更新分页指示器、以及容器内子元素动态插入后 scrollTop 是否重置——这些细节比滚动本身更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
