scroll-snap-type 仅控制滚动停靠位置，不驱动轮播；必须设在 overflow-x: auto 的可滚动容器上，子项需设 scroll-snap-align: start 和 flex: 0 0 100%，自动滚动须用 scrollBy 并监听 scrollend。
直接用 scrollBy + scrollLeft 控制容器滚动，配合 scroll-snap-type 做吸附，是目前最轻量、可控性最高、且不破坏语义结构的方案。别碰 column-count 分栏翻页——它根本不是为“阅读器”设计的，内容劈开、页码算不准、iOS Safari 表现全乱。
为什么不能用 column-count 做阅读器翻页
这是新手最容易踩的坑：以为设个 column-count: 2 就能自动分页。实际它只是把整块文本当流水线切列，完全无视段落边界和语义块。
-
break-inside: avoid在 iOS Safari 中基本失效，被从中间劈开是常态 -
scrollWidth / column-width算出来的“页数”是估算值，字体、缩放、line-height 一变，结果就偏移半页 - 禁用
overflow: hidden后，用户拖滚动条会直接跳过“页”概念，视觉和交互彻底脱节 - 没有真实 DOM 页面粒度，无法做锚点跳转、进度保存、搜索高亮等阅读器刚需功能
scroll-snap-type: x mandatory 的硬性前提
纯 CSS 滚动吸附看似简单，但漏掉任一条件就会失效。它要求 DOM 结构、样式、容器行为三者严格对齐。
- 父容器必须设
overflow-x: auto（不能是scroll或hidden），且加scroll-snap-type: x mandatory - 每个“页”元素（如
）必须设scroll-snap-align: start，且不能有margin（改用gap或padding） - 子页需设固定宽度（如
width: 100vw）并禁止缩放干扰：flex-shrink: 0（若父容器是display: flex）或white-space: nowrap（若子页是 inline 元素） - Safari 15.4 之前不支持
mandatory，可降级为proximity，但吸附松散，不适合阅读场景
用 scrollBy 实现精准左右翻页的关键控制点
当需要响应按钮点击、键盘方向键、或自定义翻页逻辑时，必须接管滚动行为。靠 scrollLeft += width 是错的——缩放、subpixel 渲染会让值漂移。
- 每次翻页前先四舍五入当前
scrollLeft：Math.round(container.scrollLeft)，再计算目标位置 - 必须设
scroll-behavior: smooth在容器上，否则scrollBy无动画 - 监听
scroll事件时用requestAnimationFrame节流，否则 iOS Safari 容易卡顿或触发多次对齐 - 对齐完成后加 100ms 防抖 flag，避免手指松开瞬间又触发一次 scroll 导致“回弹”
- 记得在
上设overflow-x: hidden，否则水平滚动条会闪一下
标签页切换与翻页逻辑如何共存
顶部标签栏（如浏览器 tab）和左右滑动翻页不是互斥的，但 DOM 层级必须清晰：标签栏控制“哪一组内容可见”，翻页控制“组内第几页”。常见错误是把两者混在同一层滚动容器里。
- 标签栏点击应切换整个内容区（如
div#content-area），而不是直接操作滚动容器 - 每个标签对应一个独立的滚动容器（如
），翻页逻辑只作用于当前激活容器 - 切换标签时，重置对应容器的
scrollLeft = 0，并确保其scroll-snap-align生效（可能需offsetParent触发重绘） - 不要在标签页切换时销毁/重建滚动容器，否则
scroll-snap状态丢失，首次翻页会失准
最易被忽略的是：翻页容器的宽高必须由 CSS 显式固定（比如 width: 100vw; height: 80vh），不能依赖内容撑开。一旦高度随字体、行高浮动，scroll-snap 的吸附位置就不可控——这点在多语言、动态字号阅读器中尤为致命。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
