使用translateX滚动联动移动图片不流畅、跳变无动画问题修复

问题根源 #

图片位移计算在滚动高度value = 600px的断点处存在数值跳变：

• 滚动高度刚好为600px时，走else分支的位移为 translateX(-300px)
• 滚动高度只要超过600px，走if分支的位移直接变为 translateX(300px+)
  两个状态间差了600px以上的位移，没有过渡衔接，就会出现跳转效果。

修复方案 #

调整大于600px时的位移计算公式，保证断点处的位移值连续：过了600px之后，从之前的-300px位置开始向右累加位移即可，修改对应代码块：

// 原来的img位移判断逻辑替换为以下内容
if (value > 600) {
  // 断点处位移保持连续，从-300px开始随滚动向右移动
  img.style.transform = `translateX(${-300 + (value - 600) * 0.5}px)`;
} else {
  img.style.transform = `translateX(-${value * 0.5}px)`;
}

可选优化建议 #

• 给#moveLeft元素添加CSS属性will-change: transform，提升动画渲染流畅度
• 推荐用React的useRef获取DOM元素，替换原生getElementById写法，避免React渲染导致元素丢失的问题
• 给滚动事件添加节流处理，减少不必要的计算，降低性能消耗

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