Question

setTimeout(() => {
  var x = element.getBoundingClientRect().x;
  var y = element.getBoundingClientRect().y;
  element.style.left = x + 'px';
  element.style.top = y + 'px';
  element.style.position = 'fixed';
  window.scrollX; // (comment out this line to break the code!)
  element.style.left = parseFloat(element.style.left) + 30 + 'px';
}, 1000);

#element {
  background-color: #fa4;
  width: 100px;
  height: 100px;
  position: static;
  transition: 1s;
}

<html>
  <body>
    <div id="element"></div>
  </body>
</html>

我想获取一个static定位的元素，并在同一位置更改为fixed，然后更改left的值来移动它。元素的style.transition属性设置为1s。

以下内容不适用于chrome / safari / firefox（元素会跳到新位置，而不是平稳过渡）：

let x = element.getBoundingClientRect().x;
let y = element.getBoundingClientRect().y;
element.style.left = x + 'px';
element.style.top = y + 'px';
element.style.position = 'fixed';
element.style.left = parseFloat(element.style.left) - 500 + 'px';

另一方面，以下略有不同的代码有效：

element.style.left = element.getBoundingClientRect().x + 'px';
element.style.top = element.getBoundingClientRect().y + 'px';
element.style.position = 'fixed';
element.style.left = parseFloat(element.style.left) - 500 + 'px';

事实上，即使这样也可以：

let x = element.getBoundingClientRect().x;
element.style.left = x + 'px';
element.style.top = element.getBoundingClientRect().y + 'px';
element.style.position = 'fixed';
element.style.left = parseFloat(element.style.left) - 500 + 'px';

或者这个（!!）：

let x = element.getBoundingClientRect().x;
let y = element.getBoundingClientRect().y;
element.style.left = x + 'px';
element.style.top = y + 'px';
element.style.position = 'fixed';
window.scrollX;
element.style.left = parseFloat(element.style.left) - 500 + 'px';

我正在尝试加深对javascript的理解。有人可以向我解释一下最后三个示例起作用的原因吗？

很明显，我可以推测这与浏览器被迫在最后一次更改left值之前“识别”新的top和left值有关行，但我想确切知道这是为什么以及如何发生，以及是否知道这个现象。

为什么（貌似）不相关的DOM查找导致转换受到尊重？

0 个答案: