scroll-snap-type 在 Chrome/Firefox 中不生效？检查容器尺寸和 overflow
scroll-snap-type 不是“加了就自动翻页”，它只在满足特定条件的滚动容器上才起作用。最常被忽略的是：父容器必须有明确的高度（或 max-height）且 overflow-y 设为 scroll 或 auto，同时不能是 overflow: hidden。
-
scroll-snap-type必须写在**滚动容器**上（通常是html、body或某个section），不是子项 - 子项（即每一页）需设
scroll-snap-align: start（或center），且不能被flex/grid的拉伸行为破坏高度 - 如果用
vh单位设子项高度，确保没有 margin/padding/border 导致实际高度溢出容器，否则 snap 会失效或跳过 - Firefox 对
scroll-snap-type: y mandatory更严格，若某页高度小于容器，可能直接禁用 snap；Chrome 容错稍高但也不稳定
如何让滚动指示器（dots）随 scroll-snap 自动同步？别监听 scroll，改用 IntersectionObserver
用 scroll 事件监听位置再算当前页，既卡顿又不准——因为 scroll-snap 是浏览器原生行为，滚动过程可能被截断、加速或跳过，scrollTop 值不可靠。正确做法是让指示器响应“哪一页真正进入了视口”。
- 给每页加唯一
id（如page-1、page-2），用IntersectionObserver监听它们的isIntersecting - 阈值设为
0.6（即 60% 可见时触发），避免快速滑动时频繁切换 - 不要在回调里直接操作 DOM 类名，用
requestIdleCallback或节流防抖，否则影响滚动流畅性 - 示例逻辑：
const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { document.querySelector('.dot.active')?.classList.remove('active'); document.querySelector(`.dot[data-page="${entry.target.id}"]`)?.classList.add('active'); } }); }, { threshold: 0.6 });
移动端 Safari 上 scroll-snap 失效或卡顿？关掉 -webkit-overflow-scrolling
iOS Safari（尤其旧版）对 scroll-snap 支持脆弱，常见表现为：拖动松手后不吸附、滚动卡在两页之间、甚至完全无视 scroll-snap-align。根本原因之一是开启了 -webkit-overflow-scrolling: touch —— 这个私有属性会接管滚动逻辑，绕过原生 snap。
- 移除所有
-webkit-overflow-scrolling: touch声明（包括 reset.css 或框架默认样式） - 确保滚动容器没有
transform、will-change等触发合成层的属性，它们在 iOS 上可能干扰 snap 判断 - 如果必须支持 iOS 13 以下，得降级方案：用
scrollTo({ behavior: 'smooth' })+ 手动计算位置，但无法做到原生级精度和惯性 - 测试时务必真机调试，模拟器对 scroll-snap 行为还原度极低
为什么 scroll-snap 指示器点击跳转后，滚动没停准？确保 scrollTo 使用 block: 'start'
用 element.scrollIntoView() 跳转时，默认 block: 'center' 会把目标页居中，破坏全屏布局；而 behavior: 'smooth' 在某些浏览器下会忽略 scroll-snap，导致停在中间。
立即学习“前端免费学习笔记（深入）”；
- 统一用
element.scrollIntoView({ block: 'start', behavior: 'smooth' })，保证顶部对齐 - 更稳妥的做法是直接调用
container.scrollTo({ top: element.offsetTop, behavior: 'smooth' })，绕过 scrollIntoView 的兼容性差异 - 如果容器用了
scroll-snap-type: y mandatory，scrollTo的behavior: 'smooth'在 Firefox 中可能仍不触发 snap，此时可加一行container.scrollTop = element.offsetTop强制定位，再让 snap 自动微调
