Введение

Intersection Observer — это один из трех типов встроенных в JavaScript наблюдателей, которые можно использовать для обнаружения изменений состояния объекта и реагирования на них. Два других — это Mutation Observer и Resize Observer. . Intersection Observer является наиболее популярным, так как с его помощью можно реализовать множество функций, таких как бесконечная прокрутка, отложенная загрузка изображений и прокрутка с анимацией. это либо повысит производительность, либо сделает веб-сайт более продвинутым. В этой статье я объясню, что такое Intersection Observer, как его использовать и применять в ванильном JavaScript.

Основы

Так что же такое Intersection Observer? Если вы посмотрите на официальный документ, вы все равно можете запутаться. Проще говоря, это API, который позволяет выполнять определенные действия, когда элемент виден в области просмотра браузера.

Все еще не понимаете? Не волнуйтесь, давайте посмотрим на пример:

const observer = new IntersectionObserver((entries) => {
  console.log(entries);
});

observer.observe(document.querySelector(".box"));

Использовать IntersectionObserver довольно просто: сначала мы создаем новый объект IntersectionObserver(), в котором первым параметром является функция обратного вызова. entries — это единственный аргумент, который ему нужен, он описывает список свойств, которые он наблюдает.

Давайте продолжим и посмотрим, что зарегистрировано в консоли.

Он возвращает массив наблюдаемых объектов, и для каждого объекта он содержит несколько атрибутов.

Некоторые важные атрибуты:

  • boundingClientRect: Расположение объекта относительно области просмотра
  • intersectionRatio: диапазон от 0 до 1, указывающий процент пересечения объекта с окном просмотра.
  • intersectionRect: Подобно boundingClientRect, он описывает местоположение, видимое в окне просмотра.
  • isIntersecting: логическое значение, указывающее, пересекается ли объект.
  • target: выбранный элемент

Эти атрибуты очень полезны, потому что мы можем использовать их для реализации некоторых эффектов прокрутки, например:

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            // change the box color if it is visible 
            entry.target.style.backgroundColor = "dodgerblue";
        } 
    });
});

observer.observe(document.querySelector(".box"));

В этом примере мы говорим, что если объект коробки пересекает область просмотра, мы устанавливаем его цвет на синий.

Параметры

Теперь, когда мы понимаем, что первый параметр в IntersectionObserver() является функцией обратного вызова, вы можете управлять обстоятельствами, при которых вызывается обратный вызов наблюдателя.

const opt= {
    threshold: 0.5,
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            // change the box color if it is visible 
            entry.target.style.backgroundColor = "dodgerblue";
        } 
    });
}, opt);

Общие параметры

  • threshold: диапазон от 0 до 1, указывающий, при каком проценте видимости цели следует вызывать функцию. Если установлено значение 0.5, это означает, что как только на экране появится половина окна, эта функция будет выполнена. По умолчанию это 1.
  • rootMargin: Он контролирует размер области просмотра, чтобы он уменьшался или увеличивался перед выполнением функции. Положительное значение увеличивает маржу, тогда как отрицательное значение уменьшает маржу. Например, если для него установлено значение -50px, это означает, что обнаружение окна просмотра будет на 50 пикселей меньше, чем фактическое окно просмотра. По умолчанию это 0.

В приведенном выше примере красный прямоугольник станет синим, когда на экране будет отображаться половина поля:

Что дальше?

Используя Intersection Observer, мы можем лучше контролировать отображение веб-сайта. Многие современные веб-сайты используют этот API-интерфейс наблюдателя для достижения множества интересных эффектов, таких как бесконечная прокрутка, отложенная загрузка изображений и прокрутка с анимацией. В следующей статье мы немного углубимся в эти варианты использования и реализуем их в React.