最轻量横向全屏滚动方案是CSS原生scroll-snap-type配合scroll-snap-align，需设容器overflow-x:auto、white-space:nowrap或display:flex，子项width:100vw且scroll-snap-align:center，并加touch-action:pan-x解决iOS卡顿。
用 scroll-snap-type 实现横向全屏滚动
移动端相册最常用、最轻量的方案就是 CSS 原生滚动 + scroll-snap-type，不需要 JS 监听或重写滚动逻辑，兼容性也足够（iOS 14+、Android Chrome 76+）。关键不是“怎么动”，而是“停在哪”——scroll-snap-type 控制容器对齐行为，scroll-snap-align 控制子项停靠位置。
常见错误是只加了 scroll-snap-type: x mandatory，但忘了给每个子项加 scroll-snap-align: center，结果滚动不卡点；或者父容器没设 overflow-x: auto 和 white-space: nowrap，导致内容换行或无法横向滚动。
实操建议：
- 外层容器必须设
display: flex或white-space: nowrap防止子项折行 - 每个相册页（如
<section>）需设scroll-snap-align: center，宽度为100vw（注意：用width: 100vw，别用flex: 0 0 100%，后者受父容器 padding 影响易错位） - 禁用默认滚动条：加
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none } - 为防 iOS 滚动惯性过强导致滑过头，可加
overscroll-behavior-x: contain
解决 iOS Safari 滚动卡顿和回弹问题
iOS Safari 对横向滚动的优化远不如纵向，尤其在 scroll-snap 场景下容易出现“拖不动”“松手后回弹”“卡在两个页面中间”。这不是 bug，是它对 touch-action 的默认限制。
立即学习“前端免费学习笔记（深入）”；
根本原因是 Safari 默认禁止横向 touch 滚动（touch-action: pan-y），必须显式放开：
- 给滚动容器加
touch-action: pan-x（不能写pan-x pinch-zoom，后者会干扰双指缩放） - 避免在容器内监听
touchstart或touchmove，哪怕空 handler 也会触发 passive event warning 并降级滚动性能 - 如果用了
position: sticky或transform动画同层，可能触发 iOS 渲染层分离失败，导致卡顿——此时可加will-change: scroll-position强制提升 - 测试时务必真机连 Safari Web Inspector，看 Timeline 是否频繁触发
Layout，若有，大概率是某处offsetWidth或getBoundingClientRect()被无意触发
用 IntersectionObserver 同步当前页索引（不用 scroll 事件）
相册常需显示页码、更新 URL hash 或预加载下一页。别用 scroll 事件监听——它在 iOS 上节流严重，且无法区分“滚动中”和“已停稳”，容易误判当前页。
IntersectionObserver 是更可靠的选择，它只在元素真正进入视口中心时触发回调，天然适配 scroll-snap 的停靠时机：
- 观察目标设为每个相册页（
<section>），阈值设[0.5]（50% 可见即触发） - 回调里取
entries[0].isIntersecting === true的那个 entry，它的target就是当前页 DOM - 注意：不要在回调里立刻调
entry.target.scrollIntoView()，会造成循环触发；如需强制对齐，改用scrollTo()配合behavior: 'auto' - 若需平滑切换页码 UI，可在回调后加
requestAnimationFrame延迟一帧更新，避免 layout thrashing
图片懒加载与宽高比保持（避免布局抖动）
相册页里图片未设宽高或加载慢，会导致滚动时页面高度跳变、scroll-snap 错位。这不是 CSS 能解决的问题，得从 HTML 结构和加载策略入手。
核心是让图片占位空间稳定：
- 每张图外层包一个
<div>，设aspect-ratio: 4/3（或根据实际图比例调整），再设overflow: hidden - 图片本身用
width: 100%; height: 100%; object-fit: cover，不设height属性 - 懒加载用
loading="lazy"即可，无需 JS 库；但必须确保图片有明确宽高属性（width和height），否则 Safari 会忽略 lazy - 如果服务端能提供缩略图尺寸，优先用
srcset+sizes，比如sizes="(max-width: 768px) 100vw, 50vw"，减少移动端下载体积
横向滚动相册的复杂点不在滚动本身，而在如何让每一页的尺寸、加载、对齐都稳住——一旦某个环节（比如图片没占位、iOS touch-action 没放开、snap-align 漏写）出问题，整个体验就断掉了。这些细节没法靠一个 CSS 属性补救，得逐层验证。
