两个 DIV 的同步位置

Question

我有一个情况，我需要将一个 DIV 放在另一个 DIV 的正下方，有点像工具提示。它必须位于单独的容器中(门户模式(。我的问题是，如果我在requestAnimationFrame中这样做 - 在回调时，如果我调用getBoundingClientRect来计算位置，我会从前一帧获得旧位置，尚未计算新位置。至少在我看来是这样。因此，当用户滚动页面时，有时框架的位置明显不正确。您必须在Chrome中上下快速滚动才能注意到它。在IE11中情况变得更糟，每帧都不正确，落后一帧，即使在以下CSS动画中也是如此。

我创建了一个简单的代码笔，我尝试使下拉列表跟随移动的"鸭子"： https://codepen.io/waterplea/pen/gdwQGK

var dropdown = document.querySelector('.dropdown');
var duck = document.querySelector('.duck');
var host = document.querySelector('.host');
requestAnimationFrame(position);
function position() {
var duckRect = duck.getBoundingClientRect();
var hostRect = host.getBoundingClientRect();
dropdown.style.top = duckRect.top + duckRect.height - hostRect.top + 'px';
dropdown.style.left = duckRect.left - hostRect.left + 'px';
requestAnimationFrame(position);
}

代码笔在IE中不起作用，因此这里有一个工作调试视图的链接，以尝试查看IE中的滞后： https://s.codepen.io/waterplea/debug/gdwQGK/DqrDdKgDjVXr

所以我的问题是——如何让我的 DIV 同步？当 DIV 的即将到来的位置已经知道时，我该如何运行我的代码？

编辑：这是Mac的屏幕截图，它始终可重现： https://jmp.sh/v/KJ9ndWhBPPQem49wfChm

Answer 1

您可以使原始主机不可见，并在其上方有两个叠加层。第一个将复制主机的内容(这次可见(，第二个将是您的鸭子有效负载。然后这两个叠加层应该同步滚动。

透明主机需要存在才能确定其自然大小，以便稍后读取。如果大小已知，您可以使用空div代替它。

该对仍然会在页面内容后面滚动一帧，但至少覆盖不会严重阻碍可见主机。