data-scroll-call

Библиотека Locomotive Scroll предоставляет возможность реагировать на события прокрутки через атрибут data-scroll-call. Этот атрибут позволяет вызывать определённые функции или обработчики, когда элемент достигает видимой зоны на экране. Для его использования необходимо сначала инициализировать экземпляр Locomotive Scroll:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1.0,
});

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

Атрибут data-scroll-call и его синтаксис

Атрибут data-scroll-call принимает строковое значение — имя события или идентификатор, который будет использоваться при вызове callback. Стандартный синтаксис выглядит так:

<div data-scroll-call="exampleEvent"></div>

Дополнительно можно использовать атрибут data-scroll-repeat, который позволяет вызывать событие повторно при повторном попадании элемента в зону видимости:

<div data-scroll-call="exampleEvent" data-scroll-repeat></div>

Без data-scroll-repeat событие будет вызвано только один раз при первом пересечении элемента видимой области.

Обработка событий с scroll.on('call')

Locomotive Scroll предоставляет метод on('call', callback) для прослушивания событий data-scroll-call. Этот callback принимает три аргумента:

  1. value — значение атрибута data-scroll-call.
  2. way — направление пересечения элемента (enter или leave).
  3. obj — объект с данными о элементе и его позиции.

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

scroll.on('call', (value, way, obj) => {
  console.log('Событие:', value);
  console.log('Направление:', way);
  console.log('Элемент:', obj.el);
});

Здесь value соответствует строке из data-scroll-call, way показывает, вошёл ли элемент в зону видимости (enter) или покинул её (leave), а obj.el ссылается на сам DOM-элемент.

Направления и контроль срабатывания

Аргумент way позволяет точно определить, когда следует выполнять действия. Возможные значения:

  • enter — элемент появился в видимой области.
  • leave — элемент покинул видимую область.

Если требуется выполнять действия только при входе элемента, можно использовать проверку:

scroll.on('call', (value, way, obj) => {
  if (way === 'enter') {
    obj.el.classList.add('active');
  }
});

Комбинирование с data-scroll-repeat

Атрибут data-scroll-repeat позволяет многократное срабатывание события. Без него событие сработает единожды. Пример повторного вызова:

<section data-scroll-call="animateSection" data-scroll-repeat></section>
scroll.on('call', (value, way, obj) => {
  if (value === 'animateSection' && way === 'enter') {
    obj.el.classList.toggle('animate');
  }
});

В данном примере класс animate будет добавляться и убираться при каждом появлении элемента в области видимости, создавая эффект анимации на повторной прокрутке.

Передача дополнительных данных через data-* атрибуты

Для динамических сценариев можно использовать дополнительные data-* атрибуты для хранения информации, которая будет использоваться в обработчике:

<div data-scroll-call="highlight" data-color="red"></div>
scroll.on('call', (value, way, obj) => {
  if (value === 'highlight' && way === 'enter') {
    const color = obj.el.dataset.color;
    obj.el.style.backgroundColor = color;
  }
});

Интеграция с анимациями

data-scroll-call отлично сочетается с CSS-анимациями и библиотеками вроде GSAP. Можно запускать сложные последовательности анимаций при прокрутке:

<div data-scroll-call="fadeIn"></div>
import { gsap } from 'gsap';

scroll.on('call', (value, way, obj) => {
  if (value === 'fadeIn' && way === 'enter') {
    gsap.to(obj.el, { opacity: 1, y: 0, duration: 1 });
  }
});

Это позволяет создавать плавные интерактивные эффекты, которые запускаются в момент появления элемента в области видимости пользователя.

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

  • Использовать уникальные значения data-scroll-call для разных элементов, чтобы избежать конфликтов.
  • Для оптимизации производительности минимизировать количество тяжелых операций внутри callback.
  • При комбинировании с data-scroll-repeat следить, чтобы повторные вызовы не создавали нежелательные побочные эффекты.
  • Можно комбинировать с другими атрибутами Locomotive Scroll, такими как data-scroll-speed и data-scroll-offset, для тонкой настройки поведения элементов.

Эта система позволяет создавать гибкие, отзывчивые и динамичные интерфейсы, полностью контролируемые через события прокрутки и атрибуты data-scroll-call.

Оглавление