Настройка для смартфонов

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

Настройка контейнера и элементов

Контейнер скролла на мобильных устройствах должен учитывать высоту видимой области (viewport). Обычно контейнер задаётся с классом .scroll-container и атрибутом data-scroll-container. Пример структуры:

<div class="scroll-container" data-scroll-container>
  <section data-scroll-section>
    <h1 data-scroll data-scroll-speed="1">Заголовок</h1>
    <p data-scroll data-scroll-speed="0.5">Текст параллакса</p>
  </section>
</div>

Важно: на мобильных устройствах не следует использовать фиксированную высоту контейнера, лучше оставлять height: auto и управлять позиционированием через Locomotive Scroll.

Инициализация с опциями для сенсорного ввода

При создании экземпляра LocomotiveScroll нужно включить поддержку тач-событий и правильно обработать smooth и lerp:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('.scroll-container'),
  smooth: true,
  smartphone: {
    smooth: true,
    breakpoint: 0 // Активно для всех ширин смартфонов
  },
  tablet: {
    smooth: true,
    breakpoint: 1024
  },
  lerp: 0.1 // Плавность прокрутки
});

Ключевые моменты:

  • smooth: true позволяет имитировать инерционную прокрутку.
  • lerp регулирует скорость “догоняющей” анимации; на мобильных устройствах рекомендуется 0.08–0.15 для естественной реакции.
  • Параметры smartphone и tablet позволяют задавать отдельные настройки для разных типов устройств.

Обработка динамического контента

На смартфонах часто применяются динамические списки, изображения и блоки с изменяющейся высотой. Locomotive Scroll должен знать точные размеры элементов для корректной работы. После добавления нового контента вызывается метод обновления:

scroll.update();

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

window.addEventListener('load', () => {
  scroll.update();
});

Работа с событиями на мобильных

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

scroll.on('scroll', (instance) => {
  console.log(instance.scroll.y);
});

Особенности для мобильных:

  • Значение scroll.y всегда учитывает инерцию.
  • Анимации лучше привязывать к процентной позиции контейнера, чтобы избежать резких скачков на маленьких экранах.

Оптимизация производительности

На смартфонах ресурсы ограничены, поэтому:

  1. Отключать параллакс на тяжелых блоках: можно задавать data-scroll-speed="0" для изображений или сложных блоков.
  2. Ленивая загрузка изображений: интегрировать loading="lazy" для уменьшения нагрузки.
  3. Минимизировать количество событий: меньше вызовов scroll.on и анимаций одновременно.
  4. Тестировать на разных разрешениях: особенно на устройствах с плотностью пикселей выше 2x.

Особенности скролла с фиксированными элементами

На мобильных иногда требуется фиксированная навигация. Locomotive Scroll поддерживает фиксированные элементы через data-scroll-sticky:

<nav data-scroll data-scroll-sticky data-scroll-target=".scroll-container">
  Меню
</nav>

Особенности:

  • На маленьких экранах фиксированные элементы могут “перепрыгивать” из-за перерасчёта размеров контейнера.
  • Для стабилизации стоит использовать отдельные медиа-запросы и position: sticky в CSS совместно с Locomotive Scroll.

Управление сенсорной прокруткой

По умолчанию на смартфонах Locomotive Scroll активирует стандартную прокрутку тачем. Для точной настройки:

smartphone: {
  smooth: true,
  getDirection: true,
  touchMultiplier: 2 // увеличивает скорость тач-прокрутки
}
  • getDirection: true позволяет отслеживать направление прокрутки.
  • touchMultiplier регулирует чувствительность свайпа.
  • Установка breakpoint помогает включать отдельные настройки только на устройствах до заданной ширины экрана.

Эти подходы обеспечивают корректную работу Locomotive Scroll на смартфонах, плавную инерционную прокрутку и стабильность анимаций без лагов даже при динамическом контенте и ограниченных ресурсах устройства.

Оглавление