React中使用useEffect实现视差效果时第三屏位移及层级问题求助

调整方案 #

针对你提到的两个问题，直接修改对应逻辑即可：

1. 第三屏图片改为向右移动

你当前的图片位移逻辑是全局统一向左，没有根据滚动到第三屏的状态做分支判断，只要在设置img的transform时结合你已有的600px滚动阈值做分支处理即可，注意要保证滚动到阈值位置时图片位置不会突变：

// 原代码 img.style.transform = `translateX(-${value * 0.25}px)`;
// 替换为以下逻辑
if (value <= 600) {
  // 前两屏保持原向左移动逻辑
  img.style.transform = `translateX(-${value * 0.25}px)`;
} else {
  // 第三屏开始向右移动，系数可根据你需要的速度调整
  const offsetBefore = 600 * 0.25;
  const moveRightDistance = (value - 600) * 0.25;
  img.style.transform = `translateX(${-offsetBefore + moveRightDistance}px)`;
}

2. 左侧文本被遮挡问题

这个问题有两个常见的排查修改点：

• 首先确认所有设置了z-index的元素都配置了非static的定位属性（比如position: relative/absolute/fixed），z-index只对定位元素生效，这是最常见的失效原因
• 调整你当前的z-index配置，如果是text3被遮挡，可以把你现在的secondfixedText的z-index阈值调整到比遮挡它的元素更高，比如你当前图片容器的z-index是10，要让文本显示在图片上层就设置为大于10的值，要显示在下层就设置为小于10的值，按你的需求调整即可：

// 示例：如果要让text3在第三屏显示在图片上层，保持你当前的配置即可，确认定位属性正常就会生效
<div class="secondfixedText" style={{ position: 'relative', zIndex: index?"11":"5" }}>

额外优化建议 #

你现在直接操作DOM的方式在React中不算最优实践，后续可以考虑把位移值存在state里，直接绑定到元素的style属性上，避免直接操作DOM引发的状态不同步问题。

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