使用translateX实现轮播滚动时溢出元素不渲染、点击按钮后鼠标滚动失效

现有问题根因说明 #

• 点击按钮后滚轮失效：大概率是偏移量同步逻辑不一致导致的。你用translate3d滚动时维护了自定义的偏移变量，滚轮事件基于这个变量更新偏移，但点击按钮修改transform后，要么没有同步更新这个偏移变量，要么按钮事件绑定了多余的阻止默认/阻止冒泡逻辑，导致滚轮事件的计算基准出错。
• translate溢出不渲染：transform属于视觉变换，不会修改元素的实际布局位置，浏览器的元素渲染裁剪是基于原始布局边界计算的，因此被translate移出容器原始布局范围的元素会被判定为不可见、跳过渲染，这个是transform的原生特性，和图层优化无关。

性能疑问解答 #

translate系列属性性能优于scrollLeft的结论是早期浏览器的旧结论，目前已经不适用：

早年浏览器处理scrollLeft时会触发滚动容器的重排（Reflow），而transform走GPU合成线程，完全不触发重排重绘，性能差距明显。但2020年之后所有主流浏览器都对滚动容器做了分层优化，设置了overflow:scroll的容器会默认被提升到合成层，修改scrollLeft的性能开销和transform已经几乎一致，轮播场景下用户完全感知不到差异。

目前普及的高性能替代方案 #

1. 原生scrollLeft + CSS Scroll Snap方案（首推） #

实现逻辑最简单，兼容性覆盖全平台：

• 给外层container设置overflow-x: hidden，内层slider的宽度设置为所有slide宽度的总和
• 给container添加scroll-snap-type: x mandatory，每个slide添加scroll-snap-align: start，原生实现滚动对齐效果，不需要手动做位置校正
• 左右按钮点击直接修改container的scrollLeft属性即可，滚轮事件完全由浏览器原生管理，不需要额外绑定逻辑，也不存在溢出元素不渲染的问题。

2. 保留transform的修复方案 #

如果一定要继续用translate3d实现，可以按以下方式修复现有问题：

• 滚轮失效问题：统一所有场景的偏移量入口，点击按钮、滚轮滚动都修改同一个全局偏移变量，每次修改变量后统一更新dom的transform属性，避免出现变量值和实际渲染值不一致的情况
• 溢出渲染问题：给slider元素添加足够的左右padding，值等于单页最大滚动距离，将translate会移动到的范围完全包含在slider的布局尺寸内，同时外层container保留overflow: hidden即可强制浏览器渲染完整的slider内容。

内容的提问来源于stack exchange，提问作者mobied