最稳方案是用 element.scrollto({ left: targetpos, behavior: 'smooth' })，需设 overflow-x: auto、禁用 scroll-behavior: smooth，目标位置通过 getboundingclientrect() 动态计算，移动端必须用 touch 事件并 preventdefault()。
用 scrollTo() 控制容器滚动位置最稳
直接改 scrollLeft 在 Safari 和部分安卓 WebView 里会和 scroll-behavior: smooth 冲突，导致跳动或卡住。优先用 element.scrollTo({ left: targetPos, behavior: 'smooth' })，它可被取消、兼容性好、且能精确对齐卡片左边缘。
关键点：
- 滑动容器必须设
overflow-x: auto（不是hidden），否则scrollTo不生效 - 务必禁用
scroll-behavior: smooth（在容器上加scroll-behavior: auto） - 目标位置别硬写像素值——遍历子元素，用
el.getBoundingClientRect().left - container.getBoundingClientRect().left算真实偏移 - 如果卡片有
gap或margin，container.children.length算平均宽会错，必须逐个取getBoundingClientRect()
移动端拖拽必须监听 touchstart/touchend，不是 mousemove
手机上 mousemove 基本不触发，靠它做滑动等于没写。真要响应手指拖拽，只能用 touchstart 记起点、touchend 算位移差，中间 touchmove 只做 preventDefault() 阻止页面滚动。
常见翻车点：
- 没在
touchstart里立刻调用event.preventDefault()，结果页面跟着上下滚 - 只监听
touchend，没记录起始clientX，导致左右方向判断失准 - 阈值设太小（比如 10px），轻微抖动就误切；建议用动态值：
Math.abs(diff) > slideWidth * 0.3（slideWidth从getBoundingClientRect().width动态读） - 容器内含图片或链接时，加
touch-action: pan-y或touch-action: none，避免浏览器抢手势
对齐一张图的关键不是动画，是目标位置是否为整数倍
用户点一下按钮就停在下一张正中央，和“动画快慢”无关，只取决于你传给 scrollTo() 的 left 值是不是某张图左边缘的准确坐标。
别信这些做法：
- 用
container.scrollWidth / container.children.length算平均宽（gap、border、padding全被忽略） - 给子项设
flex: 0 0 100%后还去算100% * currentIndex（响应式下 100% 是动态的，但scrollTo需要绝对像素） - 用
transform: translateX()模拟滚动（后续getBoundingClientRect()和滚动事件全失效）
正确姿势：循环 container.children，对每个子元素调用 el.getBoundingClientRect()，缓存其 left 值数组，切换时直接取 positions[currentIndex]。
overflow: hidden 和 display: flex 必须配对使用
轮播容器不设 overflow: hidden，滑出去的图会露在框外；不设 display: flex，子元素无法横向排列，scrollLeft 或 scrollTo 就没意义。
注意两个隐藏条件：
-
overflow: hidden必须加在最外层容器（如.carousel-container），不是.slides子容器 - 如果父容器用了
position: absolute，需确保它有明确宽高，否则overflow: hidden失效 - 在 Safari 上若遇到
transform不重绘，给.slides加transform: translateZ(0)或will-change: transform
真正容易被忽略的是：所有计算都依赖 getBoundingClientRect() 返回的可视区域尺寸，而这个值受 box-sizing、border、padding 影响。别假设“一张图就是屏幕宽”，每次取之前先测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
