javascript - 在父级内部使用 translateX 不断移动对象，我的计算有什么问题？

Question

我正在使用Anime.js（但我认为它不相关），它不断调用我的函数来在parent内computeMinMaxTranslateX移动目标，而不会溢出。

我的假设是：

• translateX 最小值由目标 x 偏移量减去容器 x 偏移量给出
• translateX 最大值由容器宽度减去元素宽度减去元素x偏移量给出（因为应该考虑到之前的位置）

我的推理有问题吗？它不起作用，目标溢出容器。这是我写的函数：

const computeMinMaxTranslateX = (element, container) => {
  const {
    x: elementX,
    width: elementWidth,
  } = element.getBoundingClientRect();
  const {
    x: containerX,
    width: containerWidth,
  } = container.getBoundingClientRect();

  return {
    min: -(elementX - containerX),
    max: containerWidth - (elementX - containerX) - elementWidth
  };
};

标签： javascripthtmldom