getBoundingClientRect кажется неточным, когда элемент преобразуется

Question

Я пытаюсь использовать преобразование CSS, чтобы перевести абсолютно позиционированный элемент SVG по диагонали вниз / вправо по области просмотра при прокрутке, и мне нужно, чтобы отдельные пути меняли цвет заливки при пересечении следующего элемента, но похоже, что getBoundingClientRect не возвращает правильные значения во время прокрутки.

Вот демонстрационная версия: https://codepen.io/ahollister/pen/mdyvQLN

А вот JS:

window.addEventListener('scroll', function(e) {
  let scrollPercent = ( window.scrollY ) / ( document.body.clientHeight - window.innerHeight );
  let scrollPercentRounded = Math.round( scrollPercent * 100 );
  document.querySelector('.arrows-container').style.transform = `translate(${scrollPercentRounded}%, ${scrollPercentRounded}%)`

  const arrowsArray = document.querySelectorAll('svg path');
  const el = document.querySelector('.bottom');
    for ( const a of arrowsArray ) {
    if ( a.getBoundingClientRect().bottom > el.offsetTop ) {
            a.style.fill = 'red';
    }
    }
});

Я пытаюсь заставить каждую стрелку менять цвет заливки, когда они пересекают линию в элемент .bottom, если вы закомментируете строку преобразования, похоже, все рассчитывается правильно:

document.querySelector('.arrows-container').style.transform = `translate(${scrollPercentRounded}%, ${scrollPercentRounded}%)`

Кто-нибудь сталкивался с этой проблемой раньше? Как я могу получить getBoundingClientRect для возврата правильных значений в этом случае?

Answer 1

Понял, в конце концов, я не учел позицию scrollY. Завершает своеобразную элементарную функцию обнаружения столкновений, которая выглядит следующим образом:

function colorOnCollision( svgPaths, el, color1, color2 ) {
    for ( const path of svgPaths ) {
        // If path is over el1 or el2
        if ( path.getBoundingClientRect().bottom < ( el.offsetHeight - window.scrollY ) ) {
            path.style.fill = color1;
        } else {
            path.style.fill = color2;
        }
    }
}