Универсальная функция JS по определению хитбоксов у HTML блоков

[wdhappyk]

Данный код не будет работать корректно, если элементы будут находится в разных контейнерах с position != static, т.к. координаты будут рассчитываться уже относительно родителя, а не документа.
https://stackblitz.com/edit/angular-ivy-hbzpmj?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css,src%2Fstyles.css
Посмотрите на данный пример. Изменение у .item position со static на relative изменяет offset-ы дочернего элемента.

[k12th]

А чего не через getBoundingClientRect?

[samanwirst]

Можно и через него.Тут уже сам выбираешь, через что получать значения

[didyk_ivan]

А зачем всё это делать ?

(конечно, если не считать игры).

[samanwirst]

Симуляции, анимации с физикой

[Metotron0]

Ожидал, что будет учтён transform: rotate, потому что без него тут пробле не видно. Понятно, что и с поворотами давно уже всё решено, но хотя бы на школьном уровне решение можно было представить.

[wdhappyk]

Данный код не будет работать корректно, если элементы будут находится в разных контейнерах с position != static, т.к. координаты будут рассчитываться уже относительно родителя, а не документа.
https://stackblitz.com/edit/angular-ivy-hbzpmj?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css,src%2Fstyles.css
Посмотрите на данный пример. Изменение у .item position со static на relative изменяет offset-ы дочернего элемента.

[samanwirst]

К сожалению я это не учел.Как я понимаю стоило использовать getBoundingClientRect

Закреплю дабы люди знали о подобной проблеме

[bazrik]

А через Intersection Observer разве нельзя это сделать?

[Metotron0]

По-моему, там есть какое-то условие по вложенности пересекающихся элементов. То ли у них общий родитель, то ли что-то похожее. Пишут, что элемент, за которым следим, должен лежать в root, означает ли это что можно отслеживать только пересечение элементов, один из которых потомок другого?