Как получить координаты видимой части элемента относительно окна?

#javascript #координаты

Получаю координаты элемента способом getBoundingClientRect() rect.top, rect.right,
rect.bottom, rect.left, но как на JS получить координаты видимой части элемента? Когда
часть элемента находится за пределами экрана.


    

Ответы

Ответ 1

Как говорил Эйнштейн: "Всё относительно"

Вам нужно получить координаты видимой части элемента только с учетом того, что элемент
может не помещаться в родителя?

Тогда допустим ваш элемент "хранится" в переменной e1. Берем e1.getBoundingClientRect(),
потом берем e1.parentNode.getBoundingClientRect() и находим максимальные значения left
и top, а также минимальные у right и bottom. Это и есть видимая часть относительно
непосредственного родителя.

Дальше хуже. Непосредственный родитель вашего элемента может не помещаться в своего
родителя или может быть смещен так, что его часть (и, может быть, часть вашего элемента)
не видна. Это не страшно, берем всех родителей вплоть до document.documentElement и
среди них находим максимальные и минимальные значения соответствующих параметров. Но
бывают еще абсолютно позиционированные элементы и элементы с фиксированным положением
относительно окна браузера. Они могут находиться в иерархии документа где угодно. Часть
из них может быть скрыта или прозрачна и это нужно учитывать при обнаружении "окна
видимости". С этим придется бороться только путем перебора всех элементов (ну пожалуй
кроме дочерних, хотя нет, есть же z-index)

Наконец ваш элемент может сидеть в