Синхронизация положения двух DIV - PullRequest
Новая
       11

Синхронизация положения двух DIV

0 голосов
/ 29 августа 2018

У меня есть случай, когда мне нужно расположить один 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);
}

Codepens не работают в IE, поэтому вот ссылка на рабочее представление отладки, чтобы попытаться увидеть отставание в IE: https://s.codepen.io/waterplea/debug/gdwQGK/DqrDdKgDjVXr

Итак, мой вопрос - как я могу синхронизировать мои DIV? Как я могу запустить свой код, когда предстоящее положение DIV уже известно?

РЕДАКТИРОВАТЬ: Вот снимок экрана с Mac, где он всегда воспроизводим: https://jmp.sh/v/KJ9ndWhBPPQem49wfChm

...