全屏滚动需用scroll-snap-type+overflow-y:scroll+height:100vh实现一屏一停，视觉差须用JS监听scroll或IntersectionObserver独立驱动，二者逻辑分离不可混用。
全屏滚动本身不依赖响应式模板，但要做「在各种设备上都一屏一停」，必须处理视口单位、缩放干扰和 scroll-snap 兼容性。视觉差是另一套逻辑，不能靠 scroll-snap 实现，得用 transform + scroll 事件或 IntersectionObserver 驱动。
scroll-snap 实现全屏滚动的最小可靠配置
关键不是写一堆 class，而是确保父容器真正接管滚动行为，且子元素尺寸严格匹配当前视口——否则在 iPad 横屏、Chrome 缩放 125%、Safari 启用「显示完整网址」时都会错位。
-
scroll-snap-type必须设在直接父容器上，且值为y mandatory（垂直）或x mandatory（水平），proximity在移动端极易失效 - 父容器需显式声明
overflow-y: scroll（不是auto），并加scroll-behavior: smooth；height: 100vh要配合min-height: 100vh防 iOS Safari 视口压缩 - 每个子元素必须设
scroll-snap-align: start（不是center，后者在首尾屏易触发不可见偏移），且height: 100vh+flex-shrink: 0防 flex 布局挤压 - 禁用
body { overflow: hidden }：它会截断滚动事件，导致scroll-snap失效；改用html { overflow: hidden }+ 父容器overscroll-behavior: contain阻止页面透传
视觉差效果不能靠 CSS scroll-snap 驱动
scroll-snap 是“停顿”机制，视觉差是“持续位移”机制，二者底层冲突。强行在 scroll-snap-align 元素上加 transform: translateY() 会导致捕捉位置计算错误，尤其在快速滚动后松手瞬间，浏览器可能跳过中间帧直接 snap 到下一屏，视觉差动画就断了。
- 真视觉差必须监听
scroll事件或用IntersectionObserver+getBoundingClientRect()计算当前滚动比例，再动态更新transform或background-position - 背景图视差慎用
background-attachment: fixed：它在 iOS Safari 和部分安卓 WebView 中渲染异常，且无法与 scroll-snap 同步；应改用background-position: calc(50% + [offset]px)配合 JS 更新 - 若用第三方库（如
parallax-js），确认其是否重写了scroll行为——很多库会preventDefault()，这会直接禁用原生 scroll-snap，必须关掉库的“接管滚动”选项
响应式模板里最常被忽略的兼容点
所谓“响应式模板”，往往自带媒体查询和 viewport 设置，但这反而会放大 scroll-snap 的坑：比如某些模板把 html 设为 font-size: 62.5%，导致 100vh 计算失准；或用 transform: scale() 做缩放适配，让 scroll-snap 对齐坐标系错乱。
- 所有涉及
vh/vw的尺寸，都要加@supports (height: 100vh)包裹，并 fallback 到min-height: 100%+position: relative - iOS Safari 的
100vh在地址栏收起/展开时会重算，导致一屏高度突变；可用document.documentElement.clientHeight动态写入 CSS 变量，再用height: var(--vh) - 不要在 scroll-snap 容器上同时启用
touch-action: pan-y和scroll-behavior: smooth：Android Chrome 会优先执行 pan-y，smooth 滚动降级为 jump
scroll-snap 的“全屏”是 CSS 视觉对齐，视觉差的“深度感”是 JS 运行时计算，两者能共存，但不能混用同一套 DOM 结构和尺寸逻辑。最稳的方案是：用 scroll-snap 控制分屏锚点，用 requestAnimationFrame 驱动视差层独立位移——它们共享同一个 scrollY 值，但各自更新自己的样式，互不干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
