Как отследить видимость элемента на js (JavaScript)

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

11.02.2021
23
3 мин.
0

Использование jQuery или более сложного подхода с методом Element.getBoundingClientRect() больше не требуется.  Проверить на JavaScript (js) видимость элемента отныне является достаточно простой задачей. И поможет в этом Intersection Observer API. Он запускает функцию обратного вызова, когда искомый элемент входит или выходит из области видимости (или за пределы другого элемента).

Этот способ намного эффективнее, чем применение события scroll совместно с методом Element.getBoundingClientRect(). В этой статье описаны основы использования такого подхода, а подробности некоторых его настроек рассматриваются в другой статье об Intersection Observer API.

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

Проверяем на js видимость элемента

В частности, потребуется создать новый конструктор IntersectionObserver() и передать в него функцию обратного вызова. Она принимает два аргумента: entries (массив прикрепленных элементов, который запускает callback-функцию) и сам observer («наблюдатель»).

// Создаем новый observer («наблюдатель»)
let observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
// Выводим в консоль сам элемент
        console.log(entry.target);
// Выводим в консоль true (если элемент виден) или false (если нет)
        console.log(entry.isIntersecting);
    });
});

// Задаем элемент для наблюдения
let el = document.querySelector('.element');

// Прикрепляем его к «наблюдателю»
observer.observe(el);

Однако, для прикрепления элемента, за которым требуется следить, «наблюдателю» необходим метод Intersection Observer.observe().

В примере ниже каждый раз, когда элемент с классом element входит или покидает область видимости, запускается функция обратного вызова. Для проверки одного элемента, а не коллекции, в массиве entries всегда будет только один item. В нашем случае — это element.

Каждый элемент в массиве entries включает в себя несколько свойств. Стоит отметить, что свойство isIntersecting имеет значение true, если элемент находится в области видимости. Если это не так, то — false. Роль target в этом случае играет сам наблюдаемый элемент.

Как отследить видимость элемента на js (JavaScript)
Метод Intersection Observer API упрощает контроль видимости элементов на js (JavaScript) (изображение создано с помощью ИИ)

Отключение наблюдения за элементом

Прекратить работу observer можно, в свою очередь, с помощью метода IntersectionObserver.unobserve().

Давайте рассмотрим еще один пример, как проверить на js видимость элемента. Допустим нам требуется создать «ленивую» загрузку текста в блок после того, как он войдет в зону видимости. Как только это произойдет, дальнейшее наблюдение за ним уже не потребуется, поэтому observer можно отключить.

Внутри callback-функции можно передать сам observer в качестве второго аргумента — obs. Если entry.isIntersecting равен true, произойдет добавление текста в элемент. Затем сработает метод obs.unobserve() для entry.target и снимет наблюдение за ним.

// Создаем новый observer («наблюдатель»)
let observer = new IntersectionObserver(function (entries, obs) {
    entries.forEach(function (entry) {
// Если элемент в зоне видимости, то ничего не происходит
        if (!entry.isIntersecting) return;
// Отключаем «наблюдатель»
        obs.unobserve(entry.target);
// Добавляем текст
        entry.target.textContent = ` Элемент вошел в зону видимости.`;
    });
});

// Задаем элемент для наблюдения
let el = document.querySelector('.element');

// Прикрепляем его к «наблюдателю»
observer.observe(el);

В качестве альтернативного варианта прекращения проверки того, что элемент в зоне видимости js имеет метод IntersectionObserver.disconnect().

// Отключаем наблюдение за всеми элементами
observer.disconnect();

Кроссбраузерность

Кроме Internet Explorer метод IntersectionObserver.disconnect() полностью поддерживается всеми основными браузерами.