Функция IntersectionObserver: функция Chrome 51, знать, когда определенный элемент находится в или вне области просмотра

IntersectionObservers позволяет вам знать, когда наблюдаемый элемент входит или выходит из области просмотра браузера, эта функция доступна в Chrome 51 (тестирование которого можно выполнить с помощью Chrome Canary).

Возможно, вы захотите сделать это, чтобы загружать изображения лениво вовремя или потому, что вам нужно знать, действительно ли пользователь просматривает определенный рекламный баннер. Вы можете сделать это, подключив событие прокрутки или используя периодический таймер и вызывая getBoundingClientRect() на этом элементе. Однако такой подход мучительно медленен, поскольку каждый вызов BoundingClientRect() заставляет браузер изменить макет всей страницы и внесет значительный вклад в ваш сайт. Вопросы становятся почти невозможными, когда вы знаете, что ваш сайт загружается внутри iframe, и вы хотите знать, когда пользователь сможет увидеть элемент.

Как это использовать

API действительно понятен и прост в использовании, объект IntersectionObserver будет создан с использованием new IntersectionObserver(),

var callback = function(elementLocationInformation){
console.log(elementLocationInformation);
};
var settings = {
// The root to use for intersection.
// If not provided, use the top-level document’s viewport.
root : null,
// Same as margin, can be 1, 2, 3 or 4 components, possibly negative lengths.
// If an explicit root element is specified, components may be percentages of the
// root element size.  If no explicit root element is specified, using a percentage
// is an error.
rootMargin : "0px",
// Threshold(s) at which to trigger callback, specified as a ratio, or list of
// ratios, of (visible area / total area) of the observed element (hence all
// entries must be in the range [0, 1]).  Callback will be invoked when the visible
// ratio of the observed element crosses a threshold in the list.
threshold : [0]
};
var IO = new IntersectionObserver(callback,settings);

Обратный вызов будет вызван один раз когда наблюдаемый элемент становится частично видимым и в другой раз, когда он покинул область просмотра. Таким образом, IntersectionObserver дает вам ответ на вопрос «Виден ли элемент X?».

соблюдать

В следующем коде показано, как наблюдать элемент с помощью метода наблюдения из возвращаемого объекта IntersectionObserver:

var io = new IntersectionObserver(
function(entries){
if(entries[0].intersectionRatio){
console.log("Is visible on scroll ! See more info using console.log");
console.log(entries[0].intersectionRect);
}else{
console.log("Is not visible");
}
}
);
// Start observing an element
io.observe(document.getElementById("myImaginaryId"));

Элемент entry будет массивом с объектом со следующей структурой:

Unobserve

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

io.unobserve(document.getElementById("myImaginaryId"));

Отключить наблюдение

Чтобы отключить весь IntersectionObserver, используйте метод отсоединения.

io.disconnect();

Для чего я должен использовать эту функцию

IntersectionObservers были специально разработаны с учетом рекламных сервисов и виджетов социальных сетей, которые часто используют фреймы и могли бы знать, видят ли они их (для улучшения многих вещей). Если iframe наблюдает за одним из его элементов, как прокрутка iframe, так и прокрутка окна, содержащего iframe, вызовут обратный вызов в соответствующие моменты времени. Однако для rootBounds будет установлено значение null, чтобы избежать утечки данных из разных источников.

Для чего я не должен использовать эту функцию

Вы должны знать, что IntersectionObservers являются намеренно ни идеальный пиксель, ни низкая задержка. Использование их для реализации таких вещей, как анимация, зависящая от прокрутки, неизбежно приведет к сбою, так как данные будут, строго говоря, устаревшими к тому времени, когда вы сможете их использовать. Объяснитель имеет более подробную информацию об исходных сценариях использования IntersectionObserver.

Вы можете получить больше информации об этом API и для чего он должен использоваться и как его использовать, читая следующий файл readme, Кроме того Подробнее об этой функции читайте в оригинальной статье Google здесь.