原生滑动对齐需用scrollby+scrollleft配合scroll-behavior: smooth，四舍五入scrollleft值、节流scroll事件、加防抖flag、设overflow-x:hidden；手动拖拽需用touch事件+transform+touch-action: pan-y；css scroll-snap最轻量但兼容性差；swiper依赖严格dom结构和初始化时机。
用 scrollBy + scrollLeft 实现原生滑动对齐
直接靠容器滚动实现页面级左右切换，不依赖库、不破坏语义结构，适合内容固定、宽度一致的全屏页。关键不是“滑”，而是“停准”。
- 必须给容器设
scroll-behavior: smooth，否则scrollBy无动画 -
scrollLeft读取值受缩放、subpixel 渲染影响，建议四舍五入到整数再计算目标位置 - 监听
scroll事件时务必节流——用requestAnimationFrame包一层，否则 iOS Safari 容易卡顿或触发多次对齐 - 对齐完成后加 100ms 的防抖 flag，避免手指松开瞬间又触发一次 scroll 事件导致“回弹”
- 别忘了设
overflow-x: hidden在 body 上，否则水平滚动条会闪一下
用 touchstart/touchmove/touchend 手动拖拽控制位移
当需要惯性、回弹、拖拽反馈或隐藏滚动条时，必须接管触摸事件。这不是“模拟滚动”，而是用 transform: translateX() 直接改位置。
-
touchstart中必须记下e.touches[0].pageX，别用clientX（它不包含滚动偏移） -
touchmove里要调e.preventDefault()，否则 iOS 会默认触发页面缩放或上下滚动 - 容器必须加
touch-action: pan-y，禁用浏览器原生横向滚动，否则 touchmove 会被拦截 - 松手后判断：如果位移绝对值
，就 <code>transform回原位；否则按速度 + 剩余距离决定是回弹还是切到下一页 - 边界检测不能只靠
Math.min/max，要结合当前页索引和总页数动态算最大/最小translateX值
用 CSS scroll-snap-type 做声明式对齐（最轻量）
纯 CSS 方案，零 JS，适合静态菜单、介绍页、步骤引导等不需要复杂逻辑的场景。但兼容性有硬伤。
- 父容器必须设
scroll-snap-type: x mandatory，子项设scroll-snap-align: start - 子项不能设
margin，它会干扰 snap 位置；改用gap或padding - Safari 15.4 之前不支持
mandatory，可降级为proximity，但吸附感变弱 - 必须配合
overflow-x: auto和white-space: nowrap（若子项是 inline 元素）或display: flex+flex-shrink: 0 - 无法响应
scrollTo或键盘方向键，纯靠手势或滚轮驱动
Swiper 初始化时 slidesPerView: 1 不生效？检查 wrapper 结构
Swiper 报错或滑不动，90% 是 HTML 结构没对。它对 DOM 层级极其敏感，不是“加个 class 就行”。
- 外层容器必须有
class="swiper"，且不能是position: fixed或transform元素的子节点（会创建新 stacking context，导致 z-index 失效） -
.swiper-wrapper必须是直接子元素，里面每个.swiper-slide必须是块级元素（div、section），不能是span或内联元素 - 初始化前确保 DOM 已就绪，
document.addEventListener('DOMContentLoaded', ...)比mounted更稳妥 - 如果用了
loop: true，Swiper 会自动复制首尾 slide，此时slideTo(0)实际跳到的是复制项，要用realIndex而非activeIndex - 移动端调试时记得关掉 Chrome 的 “Emulate touch events”，否则
touchstart可能不触发
touchend 后的速度估算、scroll 的节流时机、以及 Safari 对 scroll-snap 的 partial 支持里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
