JavaScript Academy · Урок

Наблюдение за видимостью элементов

Создавайте наблюдатель и отслеживайте элементы.

«Наблюдение за видимостью элементов» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Зачем нужен наблюдатель пересечений

Раньше для определения момента появления элемента в области просмотра приходилось слушать событие scroll и постоянно вызывать getBoundingClientRect, что работало медленно и приводило к рывкам.

Программный интерфейс наблюдателя пересечений эффективно и асинхронно отслеживает видимость в отдельном от основного потока режиме.

Создание наблюдателя

Создайте наблюдатель с помощью new IntersectionObserver(callback). Обратный вызов выполняется каждый раз, когда видимость отслеживаемого элемента пересекает порог.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

Наблюдение за элементом

Вызовите observer.observe(element), чтобы начать наблюдение за целевым элементом. Один наблюдатель может отслеживать множество элементов.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

Флаг isIntersecting

Каждая запись содержит логическое значение isIntersecting, которое сообщает, перекрывает ли целевой элемент корень (по умолчанию — область просмотра).

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

Сведения о записи

Каждый объект IntersectionObserverEntry содержит полезные данные:

target — наблюдаемый элемент
isIntersecting — пересекает ли элемент корень
intersectionRatio — какая его доля видна (от 0 до 1)
boundingClientRect — прямоугольник целевого элемента

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

Опция threshold

Опция threshold определяет, при каких долях видимости вызывается функция обратного вызова. Значение 0 срабатывает, как только становится виден хотя бы один пиксель; значение 1 — только при полной видимости.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

Опция корневого элемента

По умолчанию observer выполняет измерения относительно области просмотра браузера. Укажите root как прокручиваемый родительский элемент, чтобы вместо этого измерять видимость внутри этого контейнера.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

Опция rootMargin

rootMargin увеличивает или уменьшает ограничивающий прямоугольник корневого элемента подобно полям CSS. Положительные значения вызывают функцию обратного вызова раньше — ещё до фактического появления элемента на экране.

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

Прекращение наблюдения

Вызовите observer.unobserve(element), чтобы перестать отслеживать один элемент, или observer.disconnect(), чтобы перестать отслеживать все элементы. Это важно для очистки ресурсов и одноразовых срабатываний.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

Почему это эффективно

Браузер сам вычисляет пересечения и объединяет уведомления, вместо того чтобы запускать ваш JavaScript при каждом кадре прокрутки. Это предотвращает постоянные перерасчёты макета и сохраняет плавность прокрутки даже при большом количестве целей.

Распространённые варианты использования

Наблюдение за пересечениями лежит в основе многих практических возможностей:

Отложенная загрузка изображений и фреймов
Бесконечная прокрутка
Анимации, запускаемые прокруткой
Отслеживание показов рекламы или содержимого

Далее мы реализуем несколько таких возможностей.

Быстрая проверка

Проверьте, насколько хорошо вы поняли основы наблюдения за пересечениями.

Повторение

Вы изучили основы наблюдения за пересечениями:

new IntersectionObserver(callback, options) создаёт observer.
observe начинает наблюдение, а unobserve/disconnect прекращают его.
Каждая запись содержит isIntersecting и intersectionRatio.
threshold, root и rootMargin определяют, когда он срабатывает.
Это намного эффективнее обработчиков прокрутки.

Далее с его помощью мы реализуем отложенную загрузку изображений.

Часто задаваемые вопросы

Урок «Наблюдение за видимостью элементов» бесплатный?

Да — полный текст урока «Наблюдение за видимостью элементов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Наблюдение за видимостью элементов»?

Создавайте наблюдатель и отслеживайте элементы. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Наблюдение за видимостью элементов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy