用 scrollLeft + scrollTo 控制容器滚动比 transform 更可靠，因其语义清晰、无障碍支持好，能保留图片链接、按钮、懒加载等关键功能，避免焦点流破坏和屏幕阅读器失效。

直接用 scrollLeft + scrollTo 控制容器滚动，比 transform 模拟更可靠、语义更清晰、无障碍支持更好——尤其在商品详情页这种需保留图片链接、价格按钮、分享组件的场景下，硬套 transform 会破坏焦点流、禁用右键菜单、让屏幕阅读器无法识别当前图片位置。

为什么不能用 transform: translateX() 做商品图滑动

商品详情页的图片通常带 包裹（跳转 SKU 页）、（加入购物车）、 自身有 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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！