firefoxMultiplier

Для начала работы с Locomotive Scroll необходимо установить библиотеку через npm или подключить через CDN. Рекомендуемый способ при работе с современными сборщиками:

npm install locomotive-scroll

После установки импортируем класс и создаём экземпляр:

import LocomotiveScroll from 'locomotive-scroll';

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

Ключевым элементом является контейнер с атрибутом data-scroll-container, который будет отслеживать скролл. Параметр smooth активирует плавное прокручивание, а multiplier управляет скоростью скролла относительно стандартного поведения браузера.

Параметр firefoxMultiplier

firefoxMultiplier используется для корректировки скорости скролла в Mozilla Firefox. В этой среде стандартный метод скролла (wheel event) работает иначе, и часто наблюдается замедление анимации при включённом smooth прокручивании.

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

Принципы работы:

  • Firefox обрабатывает deltaY события колёсика мыши по-другому. Если не использовать корректировку, скролл будет заметно медленнее.
  • firefoxMultiplier умножает значение deltaY в Firefox, приводя скорость скролла к ожидаемому уровню.
  • Значение по умолчанию — 15. Его можно увеличивать или уменьшать для точной подгонки под дизайн.

Совместимость с другими параметрами

firefoxMultiplier корректно работает совместно с:

  • multiplier — общая скорость скролла;
  • smoothMobile — плавная прокрутка на мобильных устройствах;
  • lerp — коэффициент сглаживания анимации.

Пример комплексной настройки:

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

Здесь lerp контролирует плавность движения контента, multiplier задаёт базовую скорость, а firefoxMultiplier корректирует Firefox.

Практические рекомендации

  1. Тестировать в Firefox отдельно — ускорение и замедление заметно отличаются от Chrome и Safari.
  2. Подбирать значение под проект — оптимально значение в диапазоне 40–60 для большинства сайтов с плавной анимацией.
  3. Не устанавливать слишком высокие значения — это создаёт резкий и неестественный скролл.
  4. Сочетать с lerp — при высокой скорости без сглаживания движение выглядит рывками.

Работа с событиями скролла

Locomotive Scroll позволяет отслеживать прокрутку и применять анимации:

scroll.on('scroll', (obj) => {
  console.log(obj.scroll.y); // вертикальная позиция
});

С корректировкой Firefox эти значения остаются согласованными с другими браузерами, так как firefoxMultiplier компенсирует различия в обработке deltaY.

Настройка динамически

Параметр firefoxMultiplier можно менять после инициализации через update:

scroll.options.firefoxMultiplier = 60;
scroll.update();

Это полезно при адаптивном дизайне или изменении UX в зависимости от устройства и разрешения экрана.

Сочетание с пользовательскими колёсиками и тачпадом

Firefox также отличается чувствительностью колёсика и тачпада. Для получения единообразного опыта рекомендуется:

  • Использовать firefoxMultiplier вместе с multiplier;
  • Проверять поведение на тачпаде отдельно;
  • При необходимости комбинировать с scrollTo для программного скролла:
scroll.scrollTo('#section-3', {
  offset: 0,
  duration: 800,
  easing: [0.25, 0.0, 0.35, 1.0]
});

Параметр firefoxMultiplier не влияет на scrollTo, только на ручное колесико и тачпад.

Итоговые параметры настройки

Типовая конфигурация с учётом Firefox может выглядеть так:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1.1,
  firefoxMultiplier: 50,
  lerp: 0.08,
  smartphone: {
    smooth: false
  },
  tablet: {
    smooth: true
  }
});

Такой подход обеспечивает:

  • Единообразный скролл на всех браузерах;
  • Управление скоростью через multiplier;
  • Компенсацию Firefox через firefoxMultiplier;
  • Плавность анимации через lerp.
Оглавление