时间戳

首页 > 解决方案 > JavaScript：如何在多个可滚动容器中跟踪元素的位置？

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

问题描述

我想跟踪 DOM 内元素的位置，并像“磁效应”一样改变其他元素的位置。

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

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


startFollowing();
#follower, #target {
  padding: 10px 10px 10px 10px;
  color: white;
  font-weight: bold;
  width: 100px;
}

#follower {
  background: red;
}

#target {
  background: green;
}
<div style="max-height: 500px; overflow: auto">
  <br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>
  <br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>
    <div style="max-height: 250px; overflow: auto">
    <br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>
      <br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>
      <div id="target">I'm the target</div>
      <br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>
      <br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>
    </div>
  <br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>
  <br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>scroll me<br>
</div>


<br><br>


<div id="follower">I'm the follower</div>

问题是 vartarget.getBoundingClientRect()不返回元素滚动的目标位置。

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

旁注：我无法更改“追随者”容器......

标签： javascript

解决方案

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

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();

https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/

推荐阅读