Помогите пожалуйста разорбраться с методам elementFromPoint()?

Question

Проблема заключается в том, что есть два дива, один меньше другой больше. Большой постоянно перемещается и я хочу знать, когда маленький будет находиться в области координатов большого. Использую вот такой код, но на выходе у меня везде null. Почему так происходит.

let boxBig = document.querySelector(".boxBig ");
let y = 50;
let x = 20;
setInterval(() => {
  boxBig.style.top = (parseInt(boxBig.style.top) || 0) + y + "px";
  let elem = document.elementFromPoint(y, x);
  let res = elem.closest(".boxSmall");
  console.log(res);
}, 1000);

.boxBig {
  width: 100px;
  height: 100px;
  top: 50px;
  padding: 2px;
  border: 5px solid black;
  position: absolute;
}

.boxSmall {
  border: 5px solid rgb(231, 26, 91);
  position: fixed;
  width: 40px;
  height: 40px;
  top: 400px;
  left: 30px;
}

<div class="boxBig"></div>
<div class="boxSmall "></div>

Answer 1

Проблема в неверном указании координат:

перепутаны местами x и y
проверяется одна и та же точка, находящаяся вне маленького квадрата, поэтому результат всегда null.

Для решения достаточно менять проверяемую точку вместе с координатами большого квадрата, а так же подобрать такие координаты, чтобы точка при движении все-таки могла попасть внутрь маленького квадрата

let boxBig = document.querySelector(".boxBig ");
let current = document.getElementById("current");
let y = 50;
let x = 40;

current.style.top = `${y - 1 + 15}px`;
current.style.left = `${x - 1 + 5}px`;


let timer = setInterval(() => {
  let currentY = (parseInt(boxBig.style.top) || 0) + y;
  current.style.top = `${currentY - 1 + 15}px`;
  current.style.left = `${x - 1 + 5}px`;

  boxBig.style.top = currentY + "px";
  let elem = document.elementFromPoint(x + 5, currentY + 15);
  let res = elem;
  console.log(res);
  if (res != boxBig) clearInterval(timer);
}, 1000);

.boxBig {
  width: 100px;
  height: 100px;
  top: 0;
  padding: 2px;
  border: 5px solid black;
  position: absolute;
}

.boxSmall {
  border: 5px solid rgb(231, 26, 91);
  position: fixed;
  width: 40px;
  height: 40px;
  top: 100px;
  left: 30px;
}

#current {
  position: absolute;
  width: 2px;
  height: 2px;
  background: red;
}

<div id="current"></div>
<div class="boxBig"></div>
<div class="boxSmall"></div>

БЛОГ НА HUSL

Помогите пожалуйста разорбраться с методам elementFromPoint()?

Ответы (1 шт):