JavaScript：如何跟踪元素在多个可滚动容器中的位置？

我希望跟踪DOM中某个元素的位置，并像“磁效应”一样更改其他元素的位置

var follower=document.getElementById（'follower'）；
var target=document.getElementById（'target'）；
var btn=document.getElementById（'btn'）；
函数updatePosition（）{
follower.style.position='fixed'；
follower.style.boxShadow='10px 10px 15px-10px rgba（0,0,0,0.75）'；
var cellRect=target.getBoundingClientRect（）；
follower.style.left=`${cellRect.left}px`；
follower.style.top=`${cellRect.bottom+5}px`；
follower.style.width=`${cellRect.width}px`；
}
函数开始如下（）{
设置间隔（（）=>{
updatePosition（）；
}, 100);
updatePosition（）；
}
开始如下（）
#跟随者#目标{
填充：10px 10px 10px 10px；
颜色：白色；
字体大小：粗体；
宽度：100px；
}
#追随者{
背景：红色；
}
#目标{
背景：绿色；
}


滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我


滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我


滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我


滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我

我是目标

滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我


滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我


滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我


滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我
滚动我




我是跟随者
所以当目标不再可见时，你想隐藏跟随者吗？
只需检查目标是否在当前视口中，并根据如下结果隐藏/显示跟随者

var follower = document.getElementById('follower');
var target = document.getElementById('target');
var btn = document.getElementById('btn');


function updatePosition(){

  follower.style.position = 'fixed';
  follower.style.boxShadow = '10px 10px 15px -10px rgba(0,0,0,0.75)';

  var cellRect = target.getBoundingClientRect();
  follower.style.left = `${cellRect.left}px`;
  follower.style.top = `${cellRect.bottom + 5}px`;
  follower.style.width = `${cellRect.width}px`;
  if(isInViewport(target)){
    follower.style.display = 'block';  
  }else{
    follower.style.display = 'none';  
  }
}

function isInViewport(elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

function startFollowing(){
  setInterval(() => {
        updatePosition();
  }, 100);
  updatePosition();
}


startFollowing();

var follower=document.getElementById（'follower'）；
var target=document.getElementById（'target'）；
var btn=document.getElementById（'btn'）；
函数updatePosition（）{
follower.style.position='fixed'；
follower.style.boxShadow='10px 10px 15px-10px rgba（0,0,0,0.75）'；
var cellRect=target.getBoundingClientRect（）；
follower.style.left=`${cellRect.left}px`；
follower.style.top=`${cellRect.bottom+5}px`；
follower.style.width=`${cellRect.width}px`；
if（isInViewport（目标））{
follower.style.display='block'；
}否则{
follower.style.display='none'；
}
}
函数isInViewport（elem）{
var bounding=elem.getBoundingClientRect（）；
返回(
bounding.top>=0&&
bounding.left>=0&&
bounding.bottom可能使用
requestAnimationFrame（）
而不是
setInterval（）
。谢谢，但这并不完美……问题是跟踪多个可折叠容器。我知道，使用jquery这将非常容易
$（目标）。is（“：可见”）