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

Question

[Elvis]

Привет!
Как с помощью JS определить реальную видимость объекта?
К примеру есть следующее демо

Как на этом примере определить что элемент blue на самом деле не виден на экране?
Тот же вопрос с z-index. проверять все все элементы и сравнивать у кого какой z-index не вариант конечно, причем элементы могут находиться на разных позициях.

Answer 1

[rPman]

nodeElement.getBoundingClientRect() возвращает прямоугольник, если у него размеры =0 то он невидим.

Вот пример, этот код инжектят на страницу и он периодически сканирует ее всю и возвращает список видимых объектов с координатами их областей.

Comments

[Elvis]

попробовал getBoundingClientRect, но выдает вот что:

[object DOMRect] {
  bottom: 110,
  height: 50,
  left: 60,
  right: 110,
  toJSON: function toJSON() { [native code] },
  top: 60,
  width: 50,
  x: 60,
  y: 60
}

по этим данным невозможно определить. может что-то не так делаю?

[rPman]

что значит нельзя определить? четко написано высота и ширина height и width не нулевые, значит объект видимый (это не исключает варианты того что объект может быть загорожен другим, что можете определить уже сами, или иметь 100% прозрачность)

[Elvis]

rPman, а вы вопрос читали? я это и спрашиваю, как определить реальную видимость. Демо сделал, написал "Как на этом примере определить что элемент blue на самом деле не виден на экране?".
определить есть ли элемент это и ежу понятно как.

[rPman]

решаете задачу пересечения прямогольников
набрать вопрос в гугл за вас?

[Elvis]

rPman, а если на странице тысячи элементов? и у каждого свой z-index и display? да и порядок элементов не забываем. Вижу что вы понимаете в JS, но не понимаете что мне нужно. мой пример - это просто демо для наглядности, на самом деле у меня постоянно перемещающиеся элементы то выше, то ниже, то есть их то видно, то нет и мне нужно знать есть ли способ определения элемент в данный момент времени реально виден глазу человека или нет? если уж и это объяснение не понятно, то я не знаю как еще толковее объяснить.

[rPman]

На сколько я знаю такого метода нет, точнее это недоступно из javascript все же это внутренние заморочки рендера браузера.

javascript в браузере - очень быстрый, пока вы ковыряетесь со своими структурами в памяти и не трогаете dom, скорость реализации поражает, попробуйте, вполне возможно у вас получится работать с тысячами объектов в реальном времени.

p.s. причина недопонимания - формулировка вашего вопроса, как задали такой ответ и получили