Prefers-reduced-motion

Современные веб-приложения должны учитывать настройки пользователей на уровне операционной системы, связанные с доступностью. Одной из ключевых таких настроек является prefers-reduced-motion. Этот медиа-запрос указывает на предпочтение пользователя минимизировать анимации и переходы, что критично для Smooth Scroll, так как плавная прокрутка является анимацией.

Использование `prefers-reduced-motion`

В CSS и JavaScript prefers-reduced-motion проверяется с помощью медиа-запроса:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

true — пользователь предпочитает минимальные анимации.
false — пользователь не ограничивает анимации.

Для Smooth Scroll это означает возможность отключить или упростить плавную прокрутку, чтобы избежать неприятных ощущений у чувствительных пользователей.

Интеграция с библиотекой Smooth Scroll

Библиотека Smooth Scroll обычно инициализируется так:

import SmoothScroll from 'smooth-scroll';

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 600,
  speedAsDuration: true
});

Чтобы учесть prefers-reduced-motion, добавляется проверка:

import SmoothScroll from 'smooth-scroll';

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!prefersReducedMotion) {
  const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 600,
    speedAsDuration: true
  });
} else {
  // Альтернатива: мгновенная прокрутка
  document.querySelectorAll('a[href*="#"]').forEach(anchor => {
    anchor.addEventListener('click', e => {
      e.preventDefault();
      const target = document.querySelector(anchor.getAttribute('href'));
      if (target) target.scrollIntoView({ beh * avior: 'auto' });
    });
  });
}

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

Проверка prefers-reduced-motion выполняется до инициализации Smooth Scroll.
Если пользователь предпочитает минимальную анимацию, библиотека не активируется, и используется обычная синхронная прокрутка.
Такой подход соблюдает доступность и пользовательский опыт, не нарушая стандартные функции ссылок-якорей.

Реакция на динамическое изменение настроек

Настройка prefers-reduced-motion может измениться во время работы приложения. Для отслеживания изменений используется слушатель:

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

mediaQuery.addEventListener('change', (event) => {
  if (event.matches) {
    // Пользователь включил "уменьшение движения"
    scroll.destroy(); // Отключение Smooth Scroll
  } else {
    // Пользователь выключил ограничение движения
    scroll = new SmoothScroll('a[href*="#"]', { speed: 600, speedAsDuration: true });
  }
});

Метод .destroy() удаляет все обработчики Smooth Scroll и возвращает прокрутку к стандартному поведению.
При необходимости повторной активации создается новый экземпляр библиотеки.

Настройка параметров Smooth Scroll с учетом reduced motion

Некоторые опции Smooth Scroll можно адаптировать, не отключая полностью анимацию:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: prefersReducedMotion ? 0 : 600, // мгновенная прокрутка при reduced motion
  easing: prefersReducedMotion ? 'linear' : 'easeInOutCubic'
});

speed: 0 или beh * avior: 'auto' — мгновенная прокрутка без анимации.
Плавность анимации (easing) может быть упрощена для пользователей с ограничением движения.
Такой подход сохраняет ссылки якорей и интерактивность, минимизируя потенциальный дискомфорт.

Совместимость с браузерами

Поддержка prefers-reduced-motion есть в Chrome, Firefox, Safari, Edge.
В старых браузерах, где медиа-запрос не поддерживается, Smooth Scroll работает как обычно, так как проверка возвращает false по умолчанию.
Для полной совместимости рекомендуется падение на стандартную прокрутку.