Комментарии 9
Данный код не будет работать корректно, если элементы будут находится в разных контейнерах с 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-ы дочернего элемента.
А чего не через getBoundingClientRect?
А зачем всё это делать ?
(конечно, если не считать игры).
Ожидал, что будет учтён transform: rotate, потому что без него тут пробле не видно. Понятно, что и с поворотами давно уже всё решено, но хотя бы на школьном уровне решение можно было представить.
Данный код не будет работать корректно, если элементы будут находится в разных контейнерах с 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-ы дочернего элемента.
А через Intersection Observer разве нельзя это сделать?
Универсальная функция JS по определению хитбоксов у HTML блоков