使用useEffect实现滚动视差效果时图片移动及文本动画异常

问题根因 #

• left样式属性仅对position值非static的元素生效，你代码里的#moveLeft图片容器、#text2文本都使用默认的static定位，修改left属性不会触发任何布局变化，这是图片无法移动、文本效果异常的核心原因。
• text2的滚动偏移没有做触发范围限制，页面刚开始滚动就会开始移动，等你滑到第二个区块的时候文本已经偏移出可视区域了，自然不符合预期。

修复代码 #

useEffect(function onFirstMount() {
    const changeBackground = () => {
      let value = window.scrollY;
      let img = document.getElementById("moveLeft");
      let text = document.getElementById("moveUp");
      let text2 = document.getElementById("text2");
      // 计算第二个区块距离页面顶部的高度，作为text2移动的触发阈值
      const app2Offset = document.querySelector('.App2').offsetTop;
      const text2MoveValue = Math.max(0, value - app2Offset);

      img.style.left = value * 0.5 + "px";
      text.style.marginTop = "-" + value * 0.5 + "px";
      text2.style.left = text2MoveValue * 1 + "px";
    };
    window.addEventListener("scroll", changeBackground);
    return () => window.removeEventListener("scroll", changeBackground);
  }, []);

  return (
    <>
      <div className="App">
        <div class="inflow">
          <div class="positioner">
            <div class="fixed">
              <div
                id="moveUp"
                style={{
                  position: "absolute",
                  color: "#fff",
                  fontSize: "40px"
                }}
              >
                VANATAU
              </div>
              {/* 给图片容器加relative定位让left属性生效 */}
              <div id="moveLeft" style={{position: 'relative'}}>
                <img
                  alt="passport"
                  src="https://cdn.britannica.com/87/122087-050-1C269E8D/Cover-passport.jpg"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="App2">
        <div className="half">
          {/* 给text2加relative定位，初始left设为-100%实现从左侧滑入效果 */}
          <div className="text2" id="text2" style={{position: 'relative', left: '-100%'}}>
            MINIMUM INVESTMENT
          </div>
        </div>
      </div>
      <div className="App2"></div>
    </>
  )

如果需要调整各元素的移动速度，直接修改对应偏移量的乘数即可：比如把图片的value * 0.5改成value * 0.8移动速度就会变快，改成value * 0.2就会变慢。

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