touchMultiplier

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

Основные принципы работы

По умолчанию Locomotive Scroll использует значения по умолчанию для тач-событий, которые подходят для большинства случаев. touchMultiplier позволяет изменить эти значения, делая прокрутку более быстрой или, наоборот, более плавной и «тяжёлой».

Механизм работы можно описать формулой:

прокрутка = движение пальца * touchMultiplier
  • Значение > 1 увеличивает скорость скролла относительно движения пальца.
  • Значение < 1 замедляет прокрутку, создавая эффект «тяжёлого» интерфейса.
  • Значение = 1 соответствует базовой чувствительности по умолчанию.

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

Применение touchMultiplier

Параметр настраивается при инициализации экземпляра LocomotiveScroll:

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  touchMultiplier: 2.5
});

В этом примере значение 2.5 делает прокрутку на 2,5 раза быстрее движения пальца. Для плавной, медленной прокрутки можно использовать значения типа 0.5.

Важно: touchMultiplier влияет только на тач-события и не меняет скорость прокрутки колесом мыши или трекпадом, если используется стандартная десктопная прокрутка. Для синхронизации поведения колесика мыши есть отдельный параметр mouseMultiplier.

Комбинирование с другими параметрами

touchMultiplier лучше всего работает в сочетании с:

  • smooth — включает плавный скролл.
  • lerp — задаёт коэффициент интерполяции для плавного движения. Чем выше lerp, тем мягче эффект; низкие значения делают скролл более резким. Например:
const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  lerp: 0.1,
  touchMultiplier: 1.8
});

В данном случае прокрутка будет плавной, но чувствительность к движению пальца увеличена на 80%.

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

  1. Мобильные устройства — для сенсорных экранов обычно используют диапазон 1–3.
  2. Планшеты и десктопные тачпады — можно оставить значение около 1, чтобы сохранить привычное ощущение прокрутки.
  3. Анимации параллакса — если в интерфейсе есть интенсивная анимация элементов, увеличение touchMultiplier позволяет эффектам двигаться более выразительно и динамично.
  4. Тестирование на разных устройствах — важно проверять, как выбранное значение ведёт себя на iOS и Android, так как система обработки жестов может сильно различаться.

Динамическая смена touchMultiplier

Значение touchMultiplier можно менять после инициализации экземпляра:

scroll.options.touchMultiplier = 2;
scroll.update(); // Обновляет внутренние расчёты

Это позволяет адаптировать чувствительность скролла под разные секции сайта или под пользовательские настройки, например, ускорять прокрутку в длинных страницах и замедлять в коротких.

Влияние на производительность

Высокие значения touchMultiplier увеличивают нагрузку на анимацию, особенно если на странице активно используются GSAP или сложные параллакс-эффекты. Оптимальным считается диапазон от 0.5 до 3, за пределами которого возможны рывки и нестабильность скроллинга.

Для страниц с множеством элементов, у которых включён data-scroll-speed, важно корректировать touchMultiplier в зависимости от общего визуального восприятия: слишком высокое значение может сделать скролл «слишком быстрым» и разорвать плавность анимаций.

Оглавление