Определение видимости элемента

Dom7 — это компактная и быстрая библиотека для работы с DOM в JavaScript, обеспечивающая удобный API для манипуляций с элементами, событий, классов и стилей. Одной из важных задач при работе с интерфейсом является определение видимости элементов на странице. В Dom7 это достигается с помощью сочетания методов для работы с CSS, размерами элементов и их положением в DOM.

Основные подходы к проверке видимости

В Dom7 видимость элемента можно определять несколькими способами:

  1. Через свойства CSS display и visibility Состояние отображения элемента напрямую влияет на его видимость.

    var element = $('.my-element');
var isDisplayed = element.css('display') !== 'none';
var isVisible = element.css('visibility') !== 'hidden';
    • display: none полностью убирает элемент из потока документа.
    • visibility: hidden скрывает элемент, но он продолжает занимать место на странице.

    Для полноценной проверки видимости стоит учитывать оба свойства одновременно.

  2. Проверка размеров элемента Если ширина или высота элемента равна нулю, элемент фактически невидим.

    var width = element[0].offsetWidth;
var height = element[0].offsetHeight;
var isVisible = width > 0 && height > 0;

  3. Проверка наличия в DOM и видимости родительских элементов Элемент может быть скрыт из-за того, что его родительский контейнер имеет display: none. Для этого можно рекурсивно проверять всех родителей:

    function isElementVisible(el) {
  if (!el) return false;
  if (el === document) return true;
  if (Dom7(el).css('display') === 'none') return false;
  return isElementVisible(el.parentNode);
}

var visible = isElementVisible(element[0]);

Использование метода is для фильтрации видимых элементов

Dom7 предоставляет метод .is(), который позволяет проверить соответствие элемента определённому селектору. Для видимости это удобно использовать так:

var visibleElements = $('.item').filter(function() {
  return Dom7(this).is(':visible');
});

Однако стандартный селектор :visible в Dom7 отсутствует по умолчанию, поэтому его можно реализовать через сочетание проверки CSS и размеров:

Dom7.fn.isVisible = function() {
  return this.length && this.css('display') !== 'none' && this[0].offsetWidth > 0 && this[0].offsetHeight > 0;
};

if ($('.my-element').isVisible()) {
  console.log('Элемент видим');
}

Учёт прокрутки и положения элемента

Даже если элемент имеет display: block и размеры больше нуля, он может быть скрыт за пределами видимой области окна. Для полноценной проверки видимости используется метод получения координат элемента:

var rect = element[0].getBoundingClientRect();
var inViewport = rect.top >= 0 && rect.left >= 0 &&
                 rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                 rect.right <= (window.innerWidth || document.documentElement.clientWidth);
  • rect.top и rect.left показывают положение верхнего левого угла элемента относительно окна браузера.
  • rect.bottom и rect.right показывают положение нижнего правого угла.
  • Сравнение с window.innerHeight и window.innerWidth определяет, находится ли элемент полностью в области видимости.

Комбинированная проверка видимости

Для надёжной работы можно объединить все подходы в один метод:

Dom7.fn.isFullyVisible = function() {
  if (!this.length) return false;
  var el = this[0];
  if (el.css('display') === 'none' || el.css('visibility') === 'hidden') return false;
  if (el.offsetWidth === 0 || el.offsetHeight === 0) return false;

  var rect = el.getBoundingClientRect();
  var inViewport = rect.top >= 0 && rect.left >= 0 &&
                   rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                   rect.right <= (window.innerWidth || document.documentElement.clientWidth);
  return inViewport;
};

if ($('.my-element').isFullyVisible()) {
  console.log('Элемент полностью видим');
}

Такой подход учитывает:

  • CSS-свойства display и visibility.
  • Размеры элемента.
  • Положение в окне просмотра (viewport).

Практическое применение

Определение видимости элементов широко используется для:

  • Ленивой подгрузки изображений и контента.
  • Анимаций при прокрутке страницы.
  • Проверки состояния форм и кнопок перед активацией.
  • Реализации динамических интерфейсов, где элементы появляются и исчезают в зависимости от действий пользователя.

Использование Dom7 позволяет объединить удобный синтаксис селекторов jQuery-подобного стиля с высокой производительностью при работе с большими DOM-структурами, обеспечивая надёжную и точную проверку видимости.

Оглавление