纯css无法实时响应touchmove位移，必须js获取event.touches[0].clientx/y坐标并交由css transform渲染；getboundingclientrect()返回静态快照且触发强制布局，应禁用；正确做法是用clientx/y减去元素宽高一半实现中心对齐，配合position:fixed/absolute与transform:translate()及will-change:transform确保gpu加速顺滑。
纯 CSS 无法在 touchmove 过程中实时响应手指位移，所谓“滑动时的动效反馈”，必须由 JS 获取 event.touches[0].clientX 坐标，再交由 CSS 用 transform 渲染——CSS 只负责“怎么动”，JS 才决定“动多少”。
touchmove 中为什么不能用 getBoundingClientRect() 更新位置
它返回的是元素相对于视口的静态快照，不随手指移动更新；页面滚动后数值立刻偏移，且频繁调用会触发强制同步布局（layout thrashing），严重掉帧。
- 正确坐标源只有
event.touches[0].clientX和event.touches[0].clientY - 若需元素中心对齐手指，记得减去自身宽高的一半：
left = touchX - width / 2 - 目标元素必须设
position: fixed或position: absolute，否则top/left无效
为什么 transform: translate() 比 top/left 更顺滑
top/left 触发 layout + paint，CPU 主导，移动端极易卡顿；transform: translate() 走合成层，GPU 加速，60fps 更可靠。
- 统一用
element.style.transform = `translate(${x}px, ${y}px)`，别混用top和transform - 加一次
will-change: transform（仅初始设置，勿放动画里反复设） - 务必在
touchstart中调用event.preventDefault()，否则 iOS Safari 会抢走事件、导致“脱手”
touch-action 设置不当会导致滑动失效
父级设了 touch-action: none 或 manipulation，子容器的 pan-x 就直接被忽略——浏览器只认最严格的祖先声明。
- 逐层检查从触摸点元素到
body的所有父级，确认没有touch-action: none - 轮播图/横向表格等场景，只给容器设
touch-action: pan-x，其余区域保持默认（即不设） - 避免在
fixed元素上设touch-action: manipulation，部分 Android Chrome 版本会导致下方内容点击失灵
最容易被忽略的点是：iOS 上没 preventDefault() 的 touchmove，哪怕坐标算得再准，元素也会瞬间跳回原位——不是 CSS 没生效，是浏览器滚动行为覆盖了你的位移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
