on() и off()

Библиотека Locomotive Scroll предоставляет мощный механизм для управления пользовательской прокруткой и событиями, связанными с изменениями позиции скролла. Методы on() и off() являются основными инструментами для подписки и отписки от событий внутри инстанса скролла.

Метод on()

Метод on() используется для подписки на события. С его помощью можно реагировать на изменения позиции, начало и конец анимаций, активацию элементов и другие события.

Синтаксис

scroll.on(eventName, callback);
  • eventName – строка с названием события.
  • callback – функция, которая будет вызвана при возникновении события. Обычно получает объект события с полезными данными, например текущую позицию скролла.

Основные события

  1. scroll Вызывается каждый раз, когда происходит скролл. Передается объект с координатами scroll.x и scroll.y.

    scroll.on('scroll', (instance) => {
    console.log('Позиция Y:', instance.scroll.y);
});

  2. call Срабатывает при активации элементов с атрибутом data-scroll-call. Позволяет запускать кастомные функции при попадании элемента в зону видимости.

    scroll.on('call', (value, way, obj) => {
    console.log('Активирован элемент:', obj.el);
    console.log('Направление скролла:', way);
    console.log('Значение data-scroll-call:', value);
});
    • value – значение, указанное в data-scroll-call.
    • way – направление скролла (up или down).
    • obj – объект элемента, содержащий свойства el (DOM-элемент), repeat (можно ли повторно срабатывать), и id.

  3. scrollStart и scrollStop Позволяют отследить начало и остановку скролла, что удобно для запуска анимаций или задержек.

    scroll.on('scrollStart', () => {
    console.log('Начало прокрутки');
});

scroll.on('scrollStop', () => {
    console.log('Окончание прокрутки');
});

Метод off()

Метод off() используется для удаления обработчиков событий. Это важно для оптимизации производительности и предотвращения утечек памяти при динамическом добавлении и удалении элементов на странице.

Синтаксис

scroll.off(eventName, callback);
  • eventName – название события, которое нужно удалить.
  • callback – функция, которую необходимо отписать. Если callback не указан, удаляются все обработчики для этого события.

Примеры использования

Удаление конкретного обработчика:

function handleScroll(instance) {
    console.log('Скролл сработал');
}

scroll.on('scroll', handleScroll);

// Позже удаляем обработчик
scroll.off('scroll', handleScroll);

Удаление всех обработчиков для события:

scroll.off('scroll');

Удаление всех подписок на все события:

scroll.off();

Практические советы

  • Использовать on() совместно с off() при динамическом создании элементов на странице, чтобы не создавать лишние вызовы обработчиков.
  • Для событий, таких как call, лучше проверять направление скролла (way) и возможность повторного срабатывания (repeat), чтобы избежать многократного запуска одной функции.
  • Если есть тяжелые вычисления внутри обработчика scroll, стоит использовать throttle или requestAnimationFrame, так как scroll срабатывает очень часто и может сильно нагрузить браузер.

Полезные комбинации

  1. Анимации при попадании в зону видимости
scroll.on('call', (value, way, obj) => {
    if (value === 'fadeIn' && way === 'down') {
        obj.el.classList.add('visible');
    }
});
  1. Отключение событий при уходе со страницы
function cleanup() {
    scroll.off('scroll');
    scroll.off('call');
}
  1. Переназначение обработчика
scroll.off('scroll', oldHandler);
scroll.on('scroll', newHandler);

Методы on() и off() формируют основу интерактивного взаимодействия с пользователем через Locomotive Scroll, позволяя точно управлять реакцией элементов на прокрутку, оптимизировать производительность и создавать сложные анимационные эффекты. Их грамотное использование обеспечивает гибкость и надежность кода при работе с динамическими интерфейсами.

Оглавление