4

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

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

4
  • "на JS получить координаты видимой части элемента" -- окно браузера может быть перекрыто другим окном. это из js не определить. т.к. нет доступа к системному API
    – Stack
    Commented 30 дек. 2015 в 18:01
  • Это понятно, нужно получить координаты видимой части элемента, относительно окна, при скроллинге.
    – rd2d2
    Commented 30 дек. 2015 в 19:19
  • 1
    api.jquery.com/offset или javascript.ru/ui/offset
    – Stack
    Commented 30 дек. 2015 в 19:22
  • @Stack Это получается не относительно окна, а относительно документа Commented 31 дек. 2015 в 15:13

1 ответ 1

4

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

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

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

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

Наконец ваш элемент может сидеть в <iframe> страницы с другого домена или быть перекрытым например каким-нибудь флешем. Вот это уже эпик фейл. Обнаружить видно ваш элемент или нет и если видно, то какую именно часть - невозможно.

Вот. Возможность решения вашей задачи зависит от полноты ее трактовки и входных условий.

4
  • Как говорил Эйнштейн: "Всё относительно" Всё верно, забыл уточнить - нужно получить координаты видимой части элемента относительно окна. Спасибо за дополнительную информацию.
    – rd2d2
    Commented 30 дек. 2015 в 18:10
  • 1
    @rd2d2 В данной формулировке можно решить задачу аналогично поиску "габаритов" в пределах родительского элемента, только вместо его габаритов поставить {left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight} Commented 31 дек. 2015 в 17:53
  • Спасибо! Только вот как быть со скроллом? Может есть кроссбраузерный способ получить длинну и высоту окна без скролла?
    – rd2d2
    Commented 4 янв. 2016 в 14:54
  • 1
    Свойства document.documentElement.clientWidth и document.documentElement.clientHeight дают правильные значения в браузерах даже в IE6 (но только в strict-mode) Commented 4 янв. 2016 в 16:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.