Супер простой в использовании API IntersectionObserver

DOM

IntersectionObserver

Это API, который все еще находится в стадии разработки, но реализован в большинстве браузеров (кроме IE). Первый взгляд на введение в MDN:

Интерфейс IntersectionObserver предоставляет способ асинхронного наблюдения за целевым элементом и элементами-предками или документами верхнего уровня.viewportМетод изменения на перекрестке. Элемент-предок с вьюпортом вьюпорта называетсякорень (корень).

目标元素与视窗

Я не знаю, замечали ли вы, что при разработке веб-страниц, даОпределяет, появляются ли элементы в видимом окнеВсе больше и больше сопутствующих потребностей? Например:

  • Ленивая загрузка изображений или другого контента при прокрутке страницы.
  • Внедрите веб-сайт с «бесконечной прокруткой», что означает, что больше контента загружается непосредственно по мере того, как пользователь прокручивает страницу, не переворачивая страницы.
  • Погребенное точечное воздействие некоторых элементов
  • Прокрутите до соответствующей области, чтобы выполнить соответствующую анимацию или другую задачу.

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

IntersectionObserver создан для этого

Интерпретация API:

1. Использование

даnewобъявляет объект в видеcallbackа такжеoptions

const io = new IntersectionObserver(callback, options)

io.observe(DOM)

const options = {
  root: null,
  rootMargin: 0,
  thresholds: 1,
}
const io = new IntersectionObserver(entries => {
  console.log(entries)
  // Do something
}, options)

2.callback

callback — это функция обратного вызова, которая срабатывает, когда цель прослушивателя прокручивается после добавления прослушивателя. Получает записи параметров, которые являются экземпляром IntersectionObserverEntry. Описывает состояние пересечения целевого элемента с корнем. Конкретные параметры следующие:

Атрибуты иллюстрировать
boundingClientRect Возвращает ограничивающую информацию, содержащую целевой элемент, возвращаемый результат такой же, как у element.getBoundingClientRect().
intersectionRatio Возвращает долю целевого элемента, отображаемого в области просмотра.
intersectionRect Используется для описания области пересечения корневого и целевого элементов
isIntersecting Возвращает логическое значение, следующие две операции вызовут обратный вызов: 1. Если целевой элемент появляется в корневом окне просмотра, вернуть true. 2. Если он исчезает из видимой области корня, вернуть false
rootBounds Используется для описания корня в наблюдателе пересечения.
target Целевой элемент: Элемент, который пересекает корень с изменением площади (Элемент)
time Возвращает метку времени от источника IntersectionObserver до времени, когда пересечение было запущено.

Два атрибута, выделенные жирным шрифтом в таблице, являются наиболее часто используемыми условиями оценки:isIntersectingа такжеintersectionRatio

IntersectionObserverEntry打印的值

3.options

options — это объект, используемый для настройки параметров, или его можно оставить пустым. Есть три свойства, а именно:

Атрибуты иллюстрировать
root Элемент конкретного предка послушанного объекта. Если значение или значение не передается вnull, по умолчанию используется окно документа верхнего уровня (обычно html).
rootMargin Добавляется при расчете пересечениякореньОграничительная рамкаbounding boxПрямоугольное смещение , может эффективно уменьшить или расширить диапазон определения корня для удовлетворения потребностей расчета. Доступны все смещенияпиксель(px)илипроцент(%) для выражения значение по умолчанию — «0px 0px 0px 0px».
threshold Список, содержащий пороги, в порядке возрастания, где каждый порог в списке представляет собой отношение площади пересечения к площади границы объекта прослушивания. Обратный вызов запускается при пересечении любого из порогов прослушивающего объекта. Значение по умолчанию — 0.

4. Метод

Введя столько элементов конфигурации и параметров, я чуть не забыл самый важный, какие методы есть у IntersectionObserver? Если вы хотите контролировать некоторые элементы, вы должны выполнить наблюдение за элементом

метод иллюстрировать
observe() Начать прослушивание целевого элемента
unobserve() Прекратить прослушивание определенного целевого элемента
takeRecords() Возвращает массив объектов IntersectionObserverEntry для всех целей наблюдения.
disconnect() Заставьте объект IntersectionObserver остановить всю работу по мониторингу

заявление:

1. Отложенная загрузка изображения

const imgList = [...document.querySelectorAll('img')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    // isIntersecting是一个Boolean值，判断目标元素当前是否可见
    if (item.isIntersecting) {
      item.target.src = item.target.dataset.src
      // 图片加载后即停止监听该元素
      io.unobserve(item.target)
    }
  })
}, {
  root: document.querySelector('.root')
})

// observe遍历监听所有img节点
imgList.forEach(img => io.observe(img))

2. Точечное воздействие

Если есть необходимость, для конкретного элемента на странице, только при его полном отображении в видимой области, выполняется скрытая точечная экспозиция.

const boxList = [...document.querySelectorAll('.box')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    // intersectionRatio === 1说明该元素完全暴露出来，符合业务需求
    if (item.intersectionRatio === 1) {
      // 。。。 埋点曝光代码
      io.unobserve(item.target)
    }
  })
}, {
  root: null,
  threshold: 1, // 阀值设为1，当只有比例达到1时才触发回调函数
})

// observe遍历监听所有box节点
boxList.forEach(box => io.observe(box))

3. Анимация прокрутки

Я случайно написал один с приведенным выше примером, это слишком уродливо, чтобы распылять

IntersectionObserver.gif

В общем, это довольно удобный API!

Ссылка на ссылку 🔗

MDN: IntersectionObserver

MDN: IntersectionObserverEntry

Категории