#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>