4

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

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

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

1 ответ 1

4

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

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

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

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

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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