用 scrollleft 实现原生左右滑动需设 overflow-x: auto、禁用 scroll-behavior: smooth，优先用 scrollto({left, behavior}) 控制对齐，配合 getboundingclientrect 计算真实卡片位置，并检测 scrollbehavior 支持性降级。
用 scrollLeft 实现原生左右滑动切换（无框架）
不需要引入任何轮播库，纯 CSS + JS 就能做轻量、可控的左右滑动按钮。核心是操作容器的 scrollLeft 属性，而不是靠第三方动画或 transform 位移模拟。
常见错误是直接改 transform: translateX()，结果导致 getBoundingClientRect() 或监听滚动事件失效，后续加“当前页码”或“自动对齐”时踩坑。
- 滑动容器必须设
overflow-x: auto且禁用scroll-behavior: smooth（否则 JS 调用scrollLeft会被平滑动画干扰） - 按钮点击时，推荐用
element.scrollTo({ left: targetPos, behavior: 'smooth' })替代直接赋值scrollLeft = xxx，兼容性更好且可取消（scrollTo支持cancelable） - 注意元素宽度可能受 box-sizing、border、padding 影响，计算目标位置前先用
getBoundingClientRect().width获取准确可视宽
touchstart/touchend 在移动端触发不灵敏？
很多人在手机上点一次没反应，或连点两次才生效——根本原因是未阻止默认行为，或未处理 touch 事件穿透。
滑动容器若含图片或链接，默认会触发缩放、长按菜单等行为，导致 touchstart 被拦截。
- 给滑动容器加
touch-action: pan-y（允许纵向滚动）或touch-action: none（完全接管手势），避免浏览器抢事件 - 在
touchstart回调里立刻调用event.preventDefault()，但仅限需要阻止默认行为的场景（如容器内无链接/表单） - 别只监听
touchend：手指抬起瞬间位置不稳定，建议在touchstart记录起点，在touchend算位移差，>50px 才视为有效滑动
如何让每次滑动“对齐一个卡片”？
用户期望点一下按钮就切到下一张，而不是滑动一段距离后停在中间——这需要手动控制滚动位置，而非依赖自然滚动惯性。
关键不是“动画时间”，而是“目标位置是否为卡片左边缘的整数倍”。如果卡片宽度不固定（比如响应式布局），不能硬编码像素值。
- 用
container.scrollWidth / container.children.length算平均宽不靠谱，因为 margin、gap 会影响实际占位 - 更稳的方式：遍历
container.children，对每个子元素调用el.getBoundingClientRect().left - container.getBoundingClientRect().left，得到真实左偏移 - 滑动时用
container.scrollTo({ left: nearestSnapPoint, behavior: 'smooth' })，其中nearestSnapPoint是离当前scrollLeft最近的卡片左边界
IE11 或旧版 Safari 不支持 scrollTo 的 behavior 参数？
是的。scrollTo({ behavior: 'smooth' }) 在 IE11 完全不支持，Safari ≤ 13.1 仅支持 behavior: 'auto'。强行使用会导致静默失败，按钮点下去没反应。
不要写 try/catch 包裹再 fallback，那样会掩盖问题。应该检测支持性后分支处理。
- 检测方式：
'scrollBehavior' in document.documentElement.style（注意是 style 属性，不是 scrollTo 方法） - 不支持时，用
container.scrollLeft = targetPos+requestAnimationFrame手动做缓动（三次贝塞尔曲线比线性更自然） - 避免用
setTimeout做分步滚动，容易被页面重排打断，requestAnimationFrame保证与刷新率同步
对齐逻辑和 touch 处理一旦写错，后续加自动轮播或循环模式就会放大问题。先跑通单次精准滑动，再叠加其他功能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
