08 Модуль - Вслытие событий -- 03 IntersectionObserver API

Question 1

Intersection Observer API этот интерфейс предоставляет возможность

Answer 1

наблюдать за заданными элементами и упрощает реализацию отслеживания изменения в их пересечении с заданным элементом-предком или самим окном просмотра (viewport), то есть слежения за видимостью элемента.

Question 2

Observer (наблюдатель, обзервер) -

Answer 2

результат вызова класса IntersectionObserver, его экземпляр, объект с методами.

Question 3

Root (корень, контекст) - это элемент, который

Answer 3

ожидает пересечения элемента-цели. Основа наблюдателя. По умолчанию это окно просмотра браузера (viewport), но может использоваться любой другой элемент, если этого требует задача.

Question 4

Target (цель) - элемент,

Answer 4

за которым следит наблюдатель и оповещает о его вхождении в корень. Целью может быть любой элемент. Один наблюдатель может отслеживать множество различных целей.

Question 5

При рассчете пересечений, Intesection Observer рассматривает все элементы как

Answer 5

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

Question 6

rootMargin используется

Answer 6

для увеличения или уменьшения размеров границ корня для рассчета пересечений.

Question 7

Хотя Intersection Observer API поддерживается всеми последними версиями современных браузеров, следует позаботиться о

Answer 7

polyfill(полифиле), чтобы он гарантированно работал во всех актуальных версиях.

Question 8

Использование Intersection Observer

Answer 8

IntersectionObserver(callback, options)
Достаточно создать новый экземпляр класса IntersectionObserver, принимающий два аргумента — callback-функцию и объект настроек.

Question 9

IntersectionObserver(callback, options)

По умолчанию, коллбэк будет вызываться,

Answer 9

когда элемент появляется и исчезает из области видимости.

Question 10

const onEntry = (entries, observer) => {
};

const observer = new IntersectionObserver(onEntry, options);

Вторым агументом в колбек передается

Answer 10

ссылка на сам экземпляр обзервера

Question 11

Порог вхождения (threshold) означает,

Answer 11

сколько процентов элемента должно попасть в область видимости для срабатывания коллбэка. Значения могут варьироваться от 0.01 до 1.0.

Question 12

Пример IntersectionObserver(callback, options)

Answer 12

const options = {
  rootMargin: '50px',
  threshold: 0.5,
};

const onEntry = (entries, observer) => {
  entries.forEach(entry => {
    // тут можно писать логику для проверки вхождения
  });
};

const observer = new IntersectionObserver(onEntry, options);

observer.observe(elem);

Question 13

После того как экземпляр IntersectionObserver создан, необходимо

Answer 13

предоставить один или несколько целевых элементов для наблюдения. Для этого на экземляре вызывается метод observe(elem), который принимает ссылку на DOM-элемент за которым необходимо наблюдать. Когда элемент войдет (или выйдет) в область видимости (root), будет вызвана callback-функция переданная при создании экземпляра.

Question 14

observer.unobserve(element) что делает

Answer 14

element, это то за чем нужно перестать наблюдать.

Question 15

observer.disconnect() что делает

Answer 15

перестает следить за всеми событиями.