直接选 scroll-snap。它原生支持滚动对齐、性能好、无需 JS 监听，且现代浏览器（Chrome 69+、Firefox 68+、Safari 14.1+）已全面支持；transform + JS 易卡顿，scrollLeft 难精准对齐且不响应惯性滚动。
滑动导航用 scroll-snap 还是 transform？
直接选 scroll-snap。它原生支持滚动对齐、性能好、无需 JS 监听，且现代浏览器（Chrome 69+、Firefox 68+、Safari 14.1+）已全面支持。用 transform + JS 控制位移容易卡顿，尤其在低端安卓机上；而 scrollLeft 手动滚动又难精准对齐、不响应 touchmove 惯性，还绕不开防抖和节流。
关键点：
-
scroll-snap-type: x mandatory必须设在容器上，x表示水平对齐，mandatory强制停靠（proximity容易滑过不触发） - 每张卡片必须设
scroll-snap-align: start（不是center），否则 Safari 下可能错位 - 容器需加
overflow-x: auto和scroll-behavior: smooth，否则滚动生硬 - 禁用
-webkit-overflow-scrolling: touch（iOS 旧版 Safari 已废弃，且与scroll-snap冲突）
scroll-snap 卡片结构怎么写才不崩？
结构必须扁平、无嵌套滚动干扰。常见崩坏原因是：卡片内部用了 overflow: hidden 或父容器有 transform，导致 scroll-snap 失效。
正确结构只有三层：
立即学习“前端免费学习笔记（深入）”；
- 外层容器：
<div class="carousel">，设display: flex+scroll-snap-type - 卡片项：
<div class="card">，设flex: 0 0 100%（禁止缩放/换行）+scroll-snap-align: start - 卡片内容：
<img>+<p>等，不加任何影响文档流的定位或溢出控制
错误写法示例：<div class="card"><div style="position: relative">...</div></div> —— 内层 position: relative 会干扰 snap 计算。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
图片拉伸、模糊、加载抖动怎么防？
滑动中图片变形或闪跳，90% 是没控宽高比和加载时机。不能只靠 width: 100%。
必须做三件事：
- 给
.card设aspect-ratio: 16/9（或具体值），强制维持比例，避免内容撑开后重排 - 图片用
object-fit: cover+width: 100%; height: 100%，禁止height: auto（否则高度随加载变化） - 加
loading="lazy"，但首屏卡片要删掉——否则滑到第二张才开始加载，视觉断层
别用 srcset + sizes 混搭多图：滑动组件里图片尺寸固定，优先用单张 WebP + CDN 自适应裁剪，比 JS 切图更稳。
移动端点击无效、滑不动、卡死怎么办？
核心矛盾是：iOS Safari 对 scroll-snap 的 touch 支持弱于鼠标滚轮，且默认禁用非 body 滚动的惯性。
实操补救项：
- 容器加
-webkit-overflow-scrolling: auto（仅 iOS，不要touch） - 卡片加
touch-action: pan-x，明确告诉浏览器只响应水平拖拽，禁用缩放和双指操作 - 禁用
user-select: none（会影响部分安卓机型 touchstart 触发） - 如果仍卡顿，检查是否在卡片上绑了
pointerdown或touchstart事件监听器——它们会阻塞原生滚动
最后提醒：不要给整个 .carousel 加 will-change: transform，这反而在低端机上引发重绘爆炸，得不偿失。
