JavaScript无限循环滚动异常：右方向仅两轮后停止

我尝试用React结合JavaScript实现无限滚动效果，对象左方向滚动时能正常无限循环，但右方向滚动两轮后，就不再有新对象出现。

• scroll：平滑滚动因子

代码实现 #

import { useRef, useEffect } from "react";
import Physics from "./Physics";
import { useStateValue } from "./StateProvider";

export function App() {
  return (
    <>
      <Boxes />
      <Physics />
    </>
  );
}

const totalbox = 16;

export const Boxes = () => {
  return (
    <>
      {Array(totalbox)
        .fill(totalbox)
        .map((num, i) => (
          <BoxDetail key={i} keyindex={i} />
        ))}
    </>
  );
};

const BoxDetail = ({ keyindex }) => {
  const [{ pos: scroll }] = useStateValue();
  const boxRef = useRef();

  // 总宽度：所有盒子的宽度+间距之和
  const margin = 50;
  const width = 50;
  const WHOLEWIDTH = totalbox * (margin + width);

  function calcPos(_scroll, _position) {
    const temp =
      ((_scroll + _position + margin + width + WHOLEWIDTH) % WHOLEWIDTH) - margin - width;

    return temp;
  }

  useEffect(() => {
    const boxPos = 100 * keyindex;
    boxRef.current.style.left = `${calcPos(scroll, boxPos)}px`;
  }, [scroll, calcPos]);

  return (
    <>
      <div
        ref={boxRef}
        style={{
          border: '1px solid red',
          position: 'absolute',
          color: 'blue',
          margin: '0px',
          width: '50px',
          height: '50px',
        }}
      >
        box {keyindex}
      </div>
    </>
  );
};

滚动效果 #

右方向滚动 #

左方向滚动 #

问题原因与修复 #

问题根源 #

问题出在calcPos函数的位置计算逻辑上：
当向右滚动时，scroll值持续增大，计算后的temp会变成负数。这些负数位置的元素会被定位到可视区域左侧之外，而向右滚动时用户看不到左侧的元素，因此误以为没有新对象出现；但向左滚动时，这些左侧的元素会重新进入可视区域，所以左方向滚动正常。

修复代码 #

修改calcPos函数，确保计算出的位置始终在0到WHOLEWIDTH之间，让元素在滚动时能从正确的一侧进入可视区域：

function calcPos(_scroll, _position) {
  // 计算偏移量，确保结果始终为非负值
  const offset = (_scroll + _position) % WHOLEWIDTH;
  return offset < 0 ? offset + WHOLEWIDTH : offset;
}

或者用更简洁的写法处理负数取模的问题：

function calcPos(_scroll, _position) {
  return ((_scroll + _position) % WHOLEWIDTH + WHOLEWIDTH) % WHOLEWIDTH;
}

修改后，向右滚动时，元素会在移出右侧可视区域后，从右侧重新进入视野，实现完整的无限滚动循环。

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