CSS如何制作简单的幻灯片切换_结合scroll-snap属性-css教程-PHP中文网

scroll-snap-type 实现幻灯片需设于滚动容器（非子项），配合 scroll-snap-align、overflow 和明确宽高；不依赖 js 但交互功能需手动补全，ios safari 有兼容限制。

css如何制作简单的幻灯片切换_结合scroll-snap属性

scroll-snap-type 能做基础幻灯片，但必须配对 scroll-snap-align、overflow 和明确尺寸，缺一不可；不写 JS 也能跑，但点击跳转、键盘控制、循环播放这些得补逻辑。

很多人把 scroll-snap-type: x mandatory 写在每张幻灯片上，完全没用。它只对**父级滚动容器**生效，比如一个 .carousel 或 .slides-container。

正确写法：.slides-container { scroll-snap-type: x mandatory; overflow-x: scroll; }
错误写法：.slide { scroll-snap-type: x mandatory; }（浏览器直接忽略）
容器必须有明确宽度，比如 width: 100vw 或 width: 100%；用 100% 更稳妥，避免 iOS Safari 下因滚动条宽度导致的 1px 偏移
别给这个容器加 transform、filter 或 opacity ——它们会创建新层叠上下文，让 overflow 失效，幻灯片就“全露出来”了

scroll-snap-align 是子项属性，告诉浏览器“这张图想卡在哪”，但它不会自己动，只是配合容器的 scroll-snap-type 被触发。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

横向幻灯片常用 scroll-snap-align: start（左对齐），前提是幻灯片从左往右排，且容器 direction 是 ltr
如果用了 flex-direction: row-reverse 或 direction: rtl，start 就变成右对齐，此时该用 end 才能左卡
center 看似直观，但要求幻灯片宽度严格等于容器宽度，否则吸附位置漂移；start 更容错
每张幻灯片必须设 flex: 0 0 100%（或 width: 100% + flex-shrink: 0），否则 flex 压缩会导致实际宽度≠100%，吸附错位

iOS 15+ 支持 scroll-snap-type，但只认**普通 div 容器**。如果你把 scroll-snap-type: y mandatory 直接写在 body 上，Safari 会静默忽略，连报错都没有。

必须套一层包裹容器，比如 <div class="scroll-wrapper"></div>，再把所有幻灯片放进去
这个 wrapper 要设 height: 100vh、overflow-y: auto，且不能有 position: fixed 的兄弟元素遮挡（比如吸顶导航栏会中断 snap 链路）
快速滚动手势下，Safari 有时会跳过吸附，可加 overscroll-behavior: contain 阻止透传到父容器
用 JS 主动跳转时，别直接 el.scrollIntoView()，要显式传参：el.scrollIntoView({ behavior: 'smooth', block: 'start' })

原生 scroll-snap 只响应用户滚动（鼠标滚轮、触屏拖拽、空格键），它不监听按钮 click、键盘方向键或 API 调用。所以「上一张」「下一张」按钮必须自己写 JS 控制滚动位置。

最简方案：用 element.scrollTo({ left: targetX, behavior: 'smooth' })，targetX = index × containerWidth
别用 scrollLeft += width，容易累积浮点误差；建议用 Math.round() 截断
想支持循环？scroll-snap 本身不支持 wrap，得靠 JS 把首尾 clone 到两端，再监听 scroll 事件重置位置
无障碍方面：按钮要加 aria-label，幻灯片容器加 role="region" 和 aria-live="polite"，否则屏幕阅读器不知道当前页数