.getBoundingClientRect() 中的 DOMRect 是实时的还是不可变的？

Question

假设我通过在元素上调用

DOMRect

获得了

.getBoundingClientRect

对象：

let domRect = el.getBoundingClientRect();

如果我保留此对象并且

el

的边界矩形发生变化（例如因为其内容更新，或者因为用户滚动），则以下哪项是正确的？

1. domRect

   对象反映了

   el

   的新边界。也就是说，它是 DOM 状态的实时视图。或者：

2. domRect

   对象反映了

   el

   的原始边界。也就是说，它是调用

   el.getBoundingClientRect()

   时的不可变快照。

Answer 1

DOMRect

返回的

el.getBoundingClientRect()

对象是调用

.getBoundingClientRect()

时元素状态的不可变快照。如果用户滚动的页面布局发生变化，它不会随后发生变化。

这里有 CodePen 来测试这个。