Компонент Наблюдатель можно использовать для решения различных задач: анимация элементов при скроле, подсветка активного пункта меню (используется в компоненте СкролДо) и многих других.
Суть работы наблюдателя заключается в добавлении класса —watcher-view элемента в момент его появления в вьпорте (экране) при скроле и при открытии страницы. И, соответственно, убран при уходе объекта из вьюпорта.
Использование компонента
Для того, чтобы «Наблюдатель» начал следить за объектом, добавьте ему атрибут data-fls-watcher
<div data-fls-watcher class="block"> ... </div>Дополнительные настройки:
- data-fls-watcher-root=’селектор’ – селектор отца внутри которого будет наблюдать за объектом. По умолчанию <body>
- data-fls-watcher-margin=’значение’ – отступление от отца. Указываем значение в PX или в %
- data-fls-watcher-threshold=’значение’ – процент отображения объекта для срабатывания. Где 1=100% показ объекта. Указываем только целые или десятичные числа, по умолчанию 0. Может содержать массив значений через запятую.
- data-fls-watcher-once – наблюдать только один раз. То есть класс к объекту добавится только один раз и не будет убран при выходе из вьюпорта.
Пример – класс прибавится только один раз, с появлением объекта на 50% его высоты:
<div data-fls-watcher-threshold="0.5" data-fls-watcher-once data-fls-watcher class="block"> ... </div>События
После каждого срабатывания наблюдателя возникает событие watcherCallback , его можно отловить в любой части кода:
document.addEventListener("watcherCallback", function(e) {// Полная информация от наблюдателяconst entry = e.detail.entry// Наблюдаемый объектconst targetElement = entry.target})