实现Div随滚动沿视口边缘移动的JavaScript逻辑修复求助

我需要实现一个效果：在长页面滚动时，让一个div沿着屏幕边缘循环移动，具体路径是：

• 初始位置：top:0; left:0
• 滚动时先向下移动，top值逐渐增大
• 当向下移动的距离达到window.innerHeight后，改为向右移动，left值逐渐增大
• 向右移动距离达到window.innerWidth后，改为向上移动，top值逐渐减小
• 向上移动距离达到window.innerHeight后，改为向左移动，left值逐渐减小
• 完成一轮后重复上述循环

但目前的代码逻辑有问题，div只会向下移动，到达底部后回到顶部再次向下移动，无法完成后续的右、上、左移动。

原代码：

document.addEventListener("DOMContentLoaded", function () {
  var animatedDiv = document.getElementById("animatedDiv");
  var rect = animatedDiv.getBoundingClientRect();
  var xDistance = window.innerWidth - rect.width;
  var yDistance = window.innerHeight - rect.height;

  window.addEventListener("scroll", function () {
    if ((rect.left == 0) && (rect.bottom != window.innerHeight)) {
      moveDownY();
    }
    if (rect.bottom == window.innerHeight) {
      moveRightX();
    }
    if (rect.right == window.innerWidth) {
        moveUpY();
    }
    if ((rect.top == 0) && (rect.left != 0)) {
        moveLeftX();
    }
  });

  function moveDownY() {
    var distance = window.scrollY % window.innerHeight;
    if (distance <= yDistance) {
      animatedDiv.style.transform = "translateY(" + distance + "px)";
    }
  }
  function moveRightX() {
    var distance = window.scrollY % window.innerWidth;
    if (distance <= xDistance) {
      animatedDiv.style.transform = "translateX(" + distance + "px)";
    }
  }
  function moveUpY() {
    var distance = window.scrollY % window.innerHeight;
    if (distance <= yDistance) {
      animatedDiv.style.transform = "translateY(" + -distance + "px)";
    }
  }
  function moveLeftX() {
    var distance = window.scrollY % window.innerWidth;
    if (distance <= yDistance) {
      animatedDiv.style.transform = "translateX(" + -distance + "px)";
    }
  }
});

错误原因分析 #

1. rect值未实时更新：rect变量仅在页面加载时获取一次，滚动过程中div位置变化后未重新计算，导致判断条件永远停留在初始状态，只会触发向下移动逻辑。
2. 滚动距离计算错误：用window.scrollY % 单方向距离无法区分当前处于哪个移动阶段，无法对应循环路径的不同环节。
3. transform覆盖问题：每个移动函数仅设置单方向位移，会覆盖之前的方向位移，导致无法同时保留x和y的位置。
4. 判断条件精度问题：直接用==判断元素位置数值，可能因像素精度（如小数）导致条件不触发。

修复后的代码 #

document.addEventListener("DOMContentLoaded", function () {
  const animatedDiv = document.getElementById("animatedDiv");
  const divWidth = animatedDiv.offsetWidth;
  const divHeight = animatedDiv.offsetHeight;
  const maxY = window.innerHeight - divHeight;
  const maxX = window.innerWidth - divWidth;
  // 整个循环的总滚动距离：下+右+上+左
  const cycleTotal = maxY + maxX + maxY + maxX;

  window.addEventListener("scroll", function () {
    const totalScroll = window.scrollY;
    // 获取当前在循环中的位置
    const cyclePos = totalScroll % cycleTotal;
    
    let x = 0;
    let y = 0;

    if (cyclePos <= maxY) {
      // 阶段1：向下移动
      y = cyclePos;
    } else if (cyclePos <= maxY + maxX) {
      // 阶段2：向右移动
      y = maxY;
      x = cyclePos - maxY;
    } else if (cyclePos <= maxY + maxX + maxY) {
      // 阶段3：向上移动
      x = maxX;
      y = maxY - (cyclePos - maxY - maxX);
    } else {
      // 阶段4：向左移动
      y = 0;
      x = maxX - (cyclePos - maxY - maxX - maxY);
    }

    // 同时设置x和y的位移，避免覆盖
    animatedDiv.style.transform = `translate(${x}px, ${y}px)`;
  });
});

修复要点说明 #

1. 实时计算滚动阶段：通过总滚动距离对循环总长度取余，确定当前处于下/右/上/左哪个移动阶段。
2. 保留x和y的位移：每个阶段同时计算x和y的最终值，用translate(x,y)一次性设置，避免之前的位移被覆盖。
3. 避免精度问题：不再依赖元素位置的精确判断，而是通过滚动距离的区间划分阶段，逻辑更可靠。
4. 预计算固定值：初始化时就计算好div宽高、最大移动距离等固定值，避免滚动时重复计算，提升性能。

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