局部滚动内容分页本质是固定容器内滚动+JS分页管理，需解耦又同步；推荐overflow-y:scroll+scroll-snap-type实现原生吸附，配合scrollend或scrollTop计算页码，分页按钮须置于容器外并同步状态与滚动位置。
局部滚动内容分页，本质是「在固定尺寸容器内做滚动 + 分页逻辑绑定」，不是整页跳转，也不是无限加载。关键在于：滚动行为由容器自身控制，分页状态由 JS 主动管理，二者必须解耦又同步——否则会出现滚动条位置错乱、页码不同步、吸附失效等问题。
用 overflow-y: scroll + scroll-snap-type 实现原生吸附分页
这是最轻量、性能最好、且无需监听 scroll 事件的方案，适合等高内容区块（如卡片列表、步骤说明、FAQ 条目）。
- 父容器必须设固定高度（
height或max-height），且overflow-y: scroll；横向必须禁用（overflow-x: hidden），否则scroll-snap-align在部分 Safari 版本下失效 - 每个子项需为块级元素（如
<section>），并设scroll-snap-align: start；若子项高度不一致，吸附会偏移——此时应统一用min-height或flex: 1占满容器可视区 - 父容器加
scroll-snap-type: y mandatory，注意：mandatory表示强制吸附，proximity仅就近吸附（不推荐用于分页） - 滚动后无法直接读取当前页码，需配合
IntersectionObserver或监听scrollend事件（Chrome 120+ 支持，旧版需 polyfill）
用 scrollTop 手动计算当前页（兼容性最强）
当内容高度不固定、或需支持“跳转到第 N 页”按钮时，靠 CSS 吸附不够用，必须用 JS 计算滚动位置与页边界的关系。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每页高度不能硬编码，应基于首个子项的
offsetHeight动态获取（const pageHeight = container.children[0]?.offsetHeight || 0） -
scrollTop值受边距、滚动条宽度影响，建议用Math.round(container.scrollTop / pageHeight)取整，而非直接除法 - 用户快速拖拽滚动条可能跳过中间页，导致页码显示滞后——应在
scrollend事件中更新，没有该事件时可用setTimeout+ 标志位防抖 - 翻页按钮点击时，不要只改页码变量，必须调用
container.scrollTo({ top: page * pageHeight, behavior: 'smooth' })，否则视觉与状态脱节
滚动容器内嵌分页控件的 DOM 陷阱
分页按钮（如「上一页」「下一页」）如果放在滚动容器内部，会随内容一起滚动出视口，失去交互意义；若放在外部，则需手动同步容器 scrollTop 和按钮状态。
立即学习“前端免费学习笔记（深入）”；
- 绝对禁止把分页按钮塞进
scroll-container内部——它不属于可滚动内容，而是控制层 - 按钮点击后，要同时更新两个东西：
currentPage变量，以及容器的scrollTop；漏掉任一者都会造成 UI/状态不一致 - 禁用按钮逻辑不能只靠页码判断（如
currentPage === 1），还要检查scrollTop === 0，因为用户可能手动拖回顶部 - 移动端 iOS 上，
scrollTop可能因弹性滚动回弹而短暂超出范围，建议用getBoundingClientRect().top配合首项位置做二次校验
真正难的不是让内容分页，而是让滚动位置、DOM 可见性、页码变量、按钮状态这四者始终对齐。尤其在 Safari 和旧版 Android WebView 中，scrollend 缺失、scroll-snap 行为不稳定、scrollTop 四舍五入误差，都得靠防御性代码兜底——比如每次滚动后主动对齐到最近页边界，而不是被动等待事件。
