Событие scroll

Locomotive Scroll — это современная библиотека для плавного скролла с расширенными возможностями анимации и управления положением элементов на странице. Одним из ключевых аспектов её работы является событие scroll, которое позволяет отслеживать текущую позицию прокрутки и реагировать на неё динамически.

Подключение и инициализация

Для начала необходимо создать экземпляр LocomotiveScroll и задать контейнер скролла. Обычно используется блок с атрибутом data-scroll-container:

import LocomotiveScroll fr om 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1.0,
});
  • el — контейнер для прокрутки.
  • smooth — включает плавную прокрутку.
  • multiplier — регулирует скорость скролла.

Событие scroll

Библиотека предоставляет метод .on(event, callback) для подписки на различные события, включая scroll. Событие scroll вызывается при каждом обновлении позиции прокрутки и передаёт объект с информацией о текущем состоянии.

scroll.on('scroll', (args) => {
  console.log(args.scroll.y);  // вертикальная позиция скролла
  console.log(args.scroll.x);  // горизонтальная позиция скролла
});
  • args.scroll.y — вертикальная координата текущей позиции.
  • args.scroll.x — горизонтальная координата (актуально при горизонтальной прокрутке).
  • args.lim it.y / args.limit.x — максимальное значение скролла по вертикали и горизонтали.

Использование scroll для анимаций

Событие scroll активно используется для создания параллакса, анимаций элементов при прокрутке и динамического изменения стилей. Пример параллакса для фона:

scroll.on('scroll', (args) => {
  const background = document.querySelector('.parallax-bg');
  background.style.transform = `translateY(${args.scroll.y * 0.3}px)`;
});
  • Здесь коэффициент 0.3 определяет скорость смещения фона относительно прокрутки.
  • Высокие значения создают сильный эффект параллакса, малые — более плавный.

Оптимизация работы

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

let ticking = false;

scroll.on('scroll', (args) => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      updateAnimations(args.scroll.y);
      ticking = false;
    });
    ticking = true;
  }
});

function updateAnimations(y) {
  document.querySelector('.element').style.opacity = 1 - y / 1000;
}
  • Это предотвращает лишние перерасчёты стилей и повышает производительность на больших страницах.

Взаимодействие с другими событиями

Locomotive Scroll поддерживает события call и enter/leave, которые часто комбинируются с scroll для более точного управления элементами:

scroll.on('call', (func, way, obj) => {
  console.log(`Функция: ${func}, Направление: ${way}, Элемент:`, obj.el);
});
  • Событие call активируется на элементах с атрибутом data-scroll-call.
  • Используется для триггера анимаций при достижении конкретной позиции скролла.

Работа с горизонтальным скроллом

Locomotive Scroll поддерживает горизонтальный скролл через опцию direction: 'horizontal'. Событие scroll при этом передаёт значение args.scroll.x:

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

horizontalScroll.on('scroll', (args) => {
  console.log(args.scroll.x);  // позиция по горизонтали
});
  • Это позволяет создавать слайдеры и горизонтальные параллаксы без сторонних плагинов.

Часто используемые приёмы

  1. Изменение прозрачности элементов при прокрутке
scroll.on('scroll', ({ scroll }) => {
  const el = document.querySelector('.fade');
  el.style.opacity = 1 - scroll.y / 500;
});
  1. Привязка анимаций к позиции элемента
scroll.on('scroll', ({ scroll }) => {
  const section = document.querySelector('.section');
  const sectionTop = section.offsetTop;
  const sectionHeight = section.offsetHeight;

  if (scroll.y > sectionTop && scroll.y < sectionTop + sectionHeight) {
    section.classList.add('active');
  } else {
    section.classList.remove('active');
  }
});
  1. Создание «липких» элементов
scroll.on('scroll', ({ scroll }) => {
  const sticky = document.querySelector('.sticky');
  sticky.style.transform = `translateY(${scroll.y}px)`;
});

Важные моменты

  • Событие scroll не следует перегружать тяжёлыми DOM-операциями.
  • Для больших страниц лучше использовать requestAnimationFrame.
  • Позиции скролла в Locomotive Scroll основаны на виртуальном скролле, поэтому стандартные события window.scroll не учитывают плавную прокрутку.

Событие scroll в Locomotive Scroll является основой динамического управления контентом и анимациями. Его правильное использование позволяет создавать сложные визуальные эффекты и плавные взаимодействия с пользователем.

Оглавление