2

Здравствуйте. Есть задача: определить реальный просмотр изображения (блока). Для этого я определяю позицию блока на странице, учитываю скролл, свойства display и visibility, активность вкладок в браузере. Остался один момент - определение видимости относительно других элементов. Т.е. нет ли элементов, которые позиционированы прямо над моим изображением. Может кто сталкивался или у кого есть идеи как это реализовать?

2 ответа 2

2

Боюсь, на самом деле это практически невозможно. Представьте, что вышележащий элемент:

  • Имеет opacity, отличную от 1
  • Имеет background-color с альфа-каналом, отличным от 1
  • Имеет бэкграундом градиент с элементами прозрачности
  • Наоборот, полностью прозрачен, но имеет перекрывающий непрозрачный :before/:after
  • Полностью перекрывает нижележащий элемент, но не перекрывает :before/:after нижележащего элемента
  • Имеет размеры один в один, но повернут на сорок пять градусов
  • Представляет собой изображение с поддержкой альфа-канала
  • И еще куча вариантов.

Самое близкое решение, которое стоит взять - специальный псевдокласс :visible у jQuery, jQuery(element).is(':visible'); вернет вам результат требующейся проверки. Разработчики jQuery уже наверняка встали на все существующие грабли и реализовали защиту от них.

4
  • Мне кажется вы немного не на тот вопрос ответили. Из доков jQuery: "Elements are considered visible if they consume space in the document". То есть видно его реально или нет, в этом селекторе не учитывается. Посмотрите на фразу в вопросе "...прямо над моим изображением..." 14 апр 2015 в 13:34
  • @tutankhamun да, вы правы, сейчас отредактирую.
    – etki
    14 апр 2015 в 13:41
  • Ну, скажем так, Вы меня убедили подзабить на это)
    – Gomonov
    14 апр 2015 в 15:22
  • @Gomonov Боюсь что пока иначе никак. Javascript не всесилен в браузере и не все решит большинство указанных пунктов 14 апр 2015 в 15:34
0

Как вариант, используйте z-index

<div style="border: 1px solid #000; height: 200px; width: 200px; background: green; z-index: 1000; position: relative;"></div>
<div style="border: 1px solid #000; height: 200px; width: 200px; background: red; position: absolute; left: 50px; top: 50px;"></div>

jsFiddle demo

1
  • Вы додумали мой вопрос. Мне ничего делать не надо меня и так и так устраивает) Мне надо только понять, видно изображение или нет.
    – Gomonov
    14 апр 2015 в 13:43

Ваш ответ

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

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