转换元素时 getBoundingClientRect 似乎不准确

Question

我正在尝试使用 CSS 变换将绝对定位的 SVG 元素沿对角线 down/right 平移到滚动的视口中，我需要各个路径在滚动时更改其填充颜色越过下一个元素，但似乎 getBoundingClientRect 在滚动过程中 return 没有输入正确的值。

这是一个演示：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 return 获得正确的值？

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;
        }
    }
}

转换元素时 getBoundingClientRect 似乎不准确

getBoundingClientRect seems inaccurate when element is being transformed

javascript

css

animation

svg

css-transforms