Блог

Главная - Вопросы по программированию - Используйте IntersectionObserver для обнаружения изменения положения div

Используйте IntersectionObserver для обнаружения изменения положения div

#javascript #position #intersection-observer

Вопрос:

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

Страница содержит один div с идентификатором #actual , который начинается с известной позиции. Со временем #actual div меняет свое положение, и мне нужно запустить функцию, когда это произойдет.

#actual Положение может изменяться по — разному-с помощью изменений CSS слева/сверху, преобразования CSS родительского элемента или изменения размера родного элемента и перемещения div вверх/вниз.

Моя текущая попытка состоит в том, чтобы добавить скрытый div на страницу с идентификатором #known , который начинается с той же позиции, #actual что и . Теперь я пытаюсь добавить IntersectionObserver параметр, который срабатывает при изменении пересечения между #actual и. #known

Вот мой пример кода:

 const known = document.querySelector('#known');
const actual = document.querySelector('#actual');

const ioOptions = {
  tolerance: 0,
  root: known
};
const ioObserver = new IntersectionObserver(ioChange, ioOptions);

function ioChange(entries) {
  console.log('Intersection changed:', entries[0].intersectionRect);
}

ioObserver.observe(actual);

Проблема

Наблюдатель никогда не стреляет. Почему? Как я могу заставить Наблюдателя работать?

Или есть лучший/другой способ обнаружить изменения положения #actual ?

Нажмите ниже, чтобы увидеть полный образец с двумя разделами:

 const known = document.querySelector('#known');
const actual = document.querySelector('#actual');

// -- Intersection Observer --------

const ioOptions = {
  tolerance: 0,
  root: known
};
const ioObserver = new IntersectionObserver(ioChange, ioOptions);

function ioChange(entries) {
  console.log('Intersection changed:', entries[0].intersectionRect);
}

ioObserver.observe(actual);

// -- Sample animation logic -----

// I expect that this animation constantly triggers the 
// ioChange callback above.

// -- Sample animation logic -----

function setKnown() {
  known.style.left = actual.style.left;
  known.style.top = actual.style.top;
}

function moveBox() {  
  actual.style.left = (Math.random() * 240)   'px';
  actual.style.top = (Math.random() * 240)   'px';
}

actual.style.left = '120px';
actual.style.top = '120px';
setKnown();
setInterval(moveBox, 1000); 
 #root {
  position: relative;
  margin: 20px auto;
  background: #fff;
  border: 1px solid #000;
  width: 320px;
  height: 320px;
  box-shadow: 0 0 30px #0002;
  box-sizing: border-box;
  font: 14px sans-serif;
}

.box {
  width: 80px;
  height: 80px;
  position: absolute;
  text-align: center;
  line-height: 80px;
  white-space: nowrap;
  box-sizing: border-box;
}

#known {
  background: #8881;
  border: 1px dashed #999;
}

#actual {
  background: #0068;
  color: #fff;
  transition: all 0.3s;
} 
 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <div id="root">
    <div id="known" class="box">Known</div>
    <div id="actual" class="box">Actual</div>
  </div>

</body>

</html>
Метки: