Отключение для пользователей с ограниченными возможностями

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

Определение необходимости отключения

Существует несколько критериев, по которым скроллинг Locomotive Scroll следует отключить:

  1. Предпочтения пользователя: браузеры поддерживают медиа-запрос prefers-reduced-motion, который отражает желание пользователя минимизировать анимации.
  2. Адаптивные устройства: на мобильных устройствах или сенсорных экранах иногда плавный скроллинг приводит к конфликтам с нативной прокруткой.
  3. Доступность: экранные читалки или клавиатурная навигация могут некорректно интерпретировать кастомный скроллинг.
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

Если prefersReducedMotion равен true, использование Locomotive Scroll стоит отключить.

Условная инициализация

Для безопасного использования библиотеки рекомендуется создавать экземпляр Locomotive Scroll только при соблюдении условий доступности:

import LocomotiveScroll from 'locomotive-scroll';

let scrollInstance = null;

if (!prefersReducedMotion && !isTouchDevice()) {
  scrollInstance = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    multiplier: 1,
    smartphone: {
      smooth: false
    },
    tablet: {
      smooth: false
    }
  });
}

function isTouchDevice() {
  return ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
}

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

  • Проверка prefersReducedMotion предотвращает включение анимаций для пользователей, предпочитающих минимальное движение.
  • Проверка сенсорного устройства обеспечивает совместимость с мобильными платформами, где кастомный скроллинг может мешать нативному поведению.
  • Настройка smartphone.smooth и tablet.smooth позволяет локально отключать плавный скроллинг, оставляя стандартную прокрутку.

Динамическое отключение

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

function destroyScroll() {
  if (scrollInstance) {
    scrollInstance.destroy();
    scrollInstance = null;
    document.documentElement.style.overflow = '';
  }
}

window.matchMedia("(prefers-reduced-motion: reduce)").addEventListener('change', e => {
  if (e.matches) {
    destroyScroll();
  } else {
    initScroll();
  }
});

function initScroll() {
  if (!scrollInstance) {
    scrollInstance = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true
    });
  }
}

Особенности реализации:

  • Метод destroy() полностью удаляет обработчики библиотеки и возвращает документ к нативной прокрутке.
  • Изменение медиа-запроса в реальном времени позволяет учитывать динамические предпочтения пользователя.

Стили и структура для отключаемого скролла

Locomotive Scroll управляет свойствами transform контейнера, поэтому при отключении необходимо корректно вернуть нативный скролл:

[data-scroll-container] {
  overflow: auto;
  height: 100vh;
  transform: none !important;
}
  • transform: none гарантирует, что элементы вернутся в свои исходные позиции.
  • overflow: auto восстанавливает стандартное поведение прокрутки.

Учет клавиатурной навигации

Locomotive Scroll может нарушать привычное перемещение по странице с помощью клавиш Tab, Arrow и PageUp/PageDown. Для пользователей, полагающихся на клавиатуру, важно отключить кастомное управление скроллом или реализовать соответствующие обработчики:

document.addEventListener('keydown', (e) => {
  if (!scrollInstance) return;

  const step = 100;
  switch(e.key) {
    case 'ArrowDown':
      scrollInstance.scrollTo(window.scrollY + step);
      e.preventDefault();
      break;
    case 'ArrowUp':
      scrollInstance.scrollTo(window.scrollY - step);
      e.preventDefault();
      break;
  }
});
  • В случае отключенного экземпляра scrollInstance обработчики игнорируются, что сохраняет стандартное поведение клавиш.
  • При активном экземпляре Locomotive Scroll управление клавиатурой должно быть адаптировано под кастомный скроллинг.

Резюме практик

  1. Проверка prefers-reduced-motion для пользователей с ограниченными возможностями.
  2. Условная инициализация экземпляра библиотеки.
  3. Возможность динамического включения и отключения скролла через destroy() и повторную инициализацию.
  4. Корректная настройка CSS для восстановления нативного скроллинга.
  5. Адаптация клавиатурной навигации для кастомного скролла.

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

Оглавление