Изменение параметров для планшетов

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

import LocomotiveScroll fr om 'locomotive-scroll';

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

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

  • tablet.breakpoint – определяет максимальную ширину экрана, при которой применяются настройки для планшетов. Значение по умолчанию – 1024px.
  • tablet.smooth – включает или отключает плавный скролл на планшетах. Важно, что плавный скролл на сенсорных устройствах может снижать производительность.
  • multiplier – коэффициент скорости скролла, который можно подстраивать для разных типов устройств.

Адаптация мультипликатора скорости

На планшетах нередко требуется изменять скорость скролла для лучшего ощущения. Например, при горизонтальных секциях или крупных блоках контента.

if (window.innerWidth <= 1024 && window.innerWidth > 768) {
  scroll.update({ multiplier: 0.8 });
}
  • 0.8 – плавная и комфортная скорость для сенсорного ввода.
  • Можно динамически обновлять multiplier при ресайзе:
window.addEventListener('resize', () => {
  if (window.innerWidth <= 1024 && window.innerWidth > 768) {
    scroll.update({ multiplier: 0.8 });
  } else {
    scroll.update({ multiplier: 1.0 });
  }
});

Настройка чувствительности к тачу

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

scroll.on('scroll', (obj) => {
  // obj.scroll.y содержит текущую позицию скролла
  // obj.lim it.y – максимальная прокрутка по вертикали
});

Для планшетов можно ограничить чувствительность тача, уменьшая multiplier или отключая smooth при низкой производительности.

Отключение или включение скролла на планшетах

Иногда необходимо полностью отключить Locomotive Scroll на планшетах, оставив нативный скролл:

const isTablet = window.innerWidth <= 1024 && window.innerWidth > 768;

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: !isTablet,
  tablet: { smooth: true }
});
  • smooth: !isTablet – переключает плавный скролл в зависимости от устройства.
  • В сочетании с медиазапросами CSS можно скрывать эффекты, которые сильно нагружают планшет.

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

Locomotive Scroll предоставляет события scroll, call и resize. Для планшетов полезно использовать их для оптимизации анимаций и подстройки контента:

scroll.on('call', (func, dir, obj) => {
  if (isTablet) {
    if (func === 'fadeIn') {
      // замедляем анимацию для планшета
      obj.el.style.transition = 'opacity 1s ease';
    }
  }
});

scroll.on('resize', () => {
  if (isTablet) {
    scroll.update();
  }
});
  • call – позволяет запускать функции при достижении элементов.
  • resize – используется для пересчета размеров контейнера после изменения ориентации планшета.

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

  1. Отключать сложные анимации на планшетах – это снижает нагрузку на процессор.
  2. Тестировать разные значения multiplier – оптимальная скорость скролла для планшетов обычно меньше, чем для десктопа.
  3. Использовать медиазапросы совместно с JS – иногда проще скрыть эффекты через CSS и оставить нативный скролл.
  4. Следить за производительностью – инструменты браузера позволяют отследить FPS при скролле и корректировать настройки.

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

Оглавление