Получаю координаты элемента способом getBoundingClientRect()
rect.top, rect.right, rect.bottom, rect.left
, но как на JS получить координаты видимой части элемента? Когда часть элемента находится за пределами экрана.
-
"на JS получить координаты видимой части элемента" -- окно браузера может быть перекрыто другим окном. это из js не определить. т.к. нет доступа к системному API– StackCommented 30 дек. 2015 в 18:01
-
Это понятно, нужно получить координаты видимой части элемента, относительно окна, при скроллинге.– rd2d2Commented 30 дек. 2015 в 19:19
-
1api.jquery.com/offset или javascript.ru/ui/offset– StackCommented 30 дек. 2015 в 19:22
-
@Stack Это получается не относительно окна, а относительно документа– tutankhamunCommented 31 дек. 2015 в 15:13
1 ответ
Как говорил Эйнштейн: "Всё относительно"
Вам нужно получить координаты видимой части элемента только с учетом того, что элемент может не помещаться в родителя?
Тогда допустим ваш элемент "хранится" в переменной e1
. Берем e1.getBoundingClientRect()
, потом берем e1.parentNode.getBoundingClientRect()
и находим максимальные значения left
и top
, а также минимальные у right
и bottom
. Это и есть видимая часть относительно непосредственного родителя.
Дальше хуже. Непосредственный родитель вашего элемента может не помещаться в своего родителя или может быть смещен так, что его часть (и, может быть, часть вашего элемента) не видна. Это не страшно, берем всех родителей вплоть до document.documentElement
и среди них находим максимальные и минимальные значения соответствующих параметров. Но бывают еще абсолютно позиционированные элементы и элементы с фиксированным положением относительно окна браузера. Они могут находиться в иерархии документа где угодно. Часть из них может быть скрыта или прозрачна и это нужно учитывать при обнаружении "окна видимости". С этим придется бороться только путем перебора всех элементов (ну пожалуй кроме дочерних, хотя нет, есть же z-index
)
Наконец ваш элемент может сидеть в <iframe>
страницы с другого домена или быть перекрытым например каким-нибудь флешем. Вот это уже эпик фейл. Обнаружить видно ваш элемент или нет и если видно, то какую именно часть - невозможно.
Вот. Возможность решения вашей задачи зависит от полноты ее трактовки и входных условий.
-
Как говорил Эйнштейн: "Всё относительно" Всё верно, забыл уточнить - нужно получить координаты видимой части элемента относительно окна. Спасибо за дополнительную информацию.– rd2d2Commented 30 дек. 2015 в 18:10
-
1@rd2d2 В данной формулировке можно решить задачу аналогично поиску "габаритов" в пределах родительского элемента, только вместо его габаритов поставить
{left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight}
Commented 31 дек. 2015 в 17:53 -
Спасибо! Только вот как быть со скроллом? Может есть кроссбраузерный способ получить длинну и высоту окна без скролла?– rd2d2Commented 4 янв. 2016 в 14:54
-
1Свойства
document.documentElement.clientWidth
иdocument.documentElement.clientHeight
дают правильные значения в браузерах даже в IE6 (но только в strict-mode) Commented 4 янв. 2016 в 16:08