Модуль «Наблюдатель» можно использовать для решения различных задач: анимация элементов при скроле, подсветка активного пункта меню (используется в модуле «Прокрутка в нужный блок») и многих других.
Суть работы наблюдателя заключается в добавлении класса _watcher-view элемента в момент его появления во въезде (экране) при скроле и при открытии страницы. И, соответственно, убран при уходе объекта из вьюпорта.
Подключение модуля
[HTML] Для объекта, за которым требуется установить наблюдение, следует добавить атрибут data-watch
<div data-watch class="block">
...
</div>[JS] В файле js/app.js раскомментировать строку import ‘./libs/watcher.js’
Дополнительные настройки:
- data-watch-root=’селектор’ – селектор отца внутри которого будет наблюдать за объектом. По умолчанию <body>
- data-watch-margin=’значение’ – отступление от отца. Указываем значение в PX или в %
- data-watch-threshold=’значение’ – процент отображения объекта для срабатывания. Где 1=100% показ объекта. Указываем только целые или десятичные числа, по умолчанию 0. Может содержать массив значений через запятую.
- data-watch-once – наблюдать только один раз. То есть класс к объекту добавится только один раз и не будет убран при выходе из вьюпорта.
Пример – класс прибавится только один раз, с появлением объекта на 50% его высоты:
<div data-watch-threshold="0.5" data-watch-once data-watch class="block">
...
</div>События
После каждого износа наблюдателя возникает событие watcherCallback , его можно отловить в любой части кода:
document.addEventListener("watcherCallback", function (e) {
// Полная информация от наблюдателя
const entry = e.detail.entry;
// Наблюдаемый объект
const targetElement = entry.target;
});Расположение и дополнительные данные
Функционал содержится в файле js/libs/watcher.js . Название класса ScrollWatcher . Модуль построен на основе Intersection Observer API .
Модуль снабжен системой FLS и будет сообщать о своих действиях в консоль браузера.