用 scrollLeft + scrollTo 控制容器滚动比 transform 更可靠，因其语义清晰、无障碍支持好，能保留图片链接、按钮、懒加载等关键功能，避免焦点流破坏和屏幕阅读器失效。
直接用 scrollLeft + scrollTo 控制容器滚动，比 transform 模拟更可靠、语义更清晰、无障碍支持更好——尤其在商品详情页这种需保留图片链接、价格按钮、分享组件的场景下，硬套 transform 会破坏焦点流、禁用右键菜单、让屏幕阅读器无法识别当前图片位置。
为什么不能用 transform: translateX() 做商品图滑动
商品详情页的图片通常带 <a></a> 包裹（跳转 SKU 页）、<button></button>（加入购物车）、<img alt="HTML商品详情页怎么做左右滑动？触屏滑动制作教程" > 自身有 alt 和懒加载属性。一旦用 transform 移动整个容器：
-
getBoundingClientRect()返回的位置永远是初始值，后续做“当前图高亮”或“缩放定位”时坐标全错 - 触摸事件监听失效：iOS Safari 在
transform容器内不触发click，导致“点击放大”按钮失灵 - 屏幕阅读器读不出当前展示的是第几张图，
aria-live同步困难 - 图片懒加载
loading="lazy"在transform容器中可能不触发加载
scrollTo 实现对齐一张图的关键三步
目标不是“能滑”，而是“点一下箭头/拖一下，就精准停在下一张图左边缘”。这需要绕过 CSS gap、border、subpixel 渲染干扰：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给图片容器设
overflow-x: auto和scroll-behavior: none（显式禁用浏览器平滑滚动，否则scrollTo被劫持） - 每次切换前，遍历所有
.product-image元素，用el.getBoundingClientRect().left - container.getBoundingClientRect().left算真实左偏移，而非el.offsetLeft或index * width - 调用
container.scrollTo({ left: targetLeft, behavior: 'smooth' })，不用scrollLeft = xxx——前者可被scrollTo.cancel()中断，防连点抖动
移动端 touch 拖拽必须处理的四个细节
用户手指一划就卡住、松手后不回弹、或划两下才生效？大概率是以下任一没做：
立即学习“前端免费学习笔记（深入）”；
- 容器加
touch-action: pan-y：允许纵向滚动（如页面下滑），禁止浏览器抢横向手势 -
touchstart回调里立刻event.preventDefault()，但只在container.children.length > 1且非表单区域时执行 - 记录起点用
e.touches[0].pageX（含滚动偏移），不是clientX；位移差绝对值> 50才算有效滑动 -
touchend后别立刻对齐：先requestAnimationFrame(() => { /* 对齐逻辑 */ })，避免 iOS Safari 触发两次 scroll 事件
边界判断和防抖容易被忽略的点
滑到最后一张还往右拖，或快速点两次箭头导致滚过头，本质是没封死滚动范围：
-
scrollTo前检查targetLeft是否在[0, container.scrollWidth - container.clientWidth]内，超了就取极值 - 对齐完成后设个
isScrolling = true标志位，持续 120ms，期间忽略新的scroll事件，防止松手瞬间又触发一次对齐造成“回弹” - 别依赖
window.innerWidth算图宽：用container.querySelector('.product-image').getBoundingClientRect().width动态取，兼容缩放、字体变化、flex gap
