cancelScroll() - отмена анимации

Метод cancelScroll() является ключевым инструментом библиотеки Smooth Scroll для управления текущими анимациями прокрутки. Его основное предназначение — немедленно остановить любую активную анимацию, предотвращая дальнейшее движение страницы к целевому элементу. Это особенно важно в интерфейсах с динамическими изменениями контента или когда пользователь решает вручную прервать автоматическую прокрутку.

Синтаксис

smoothScroll.cancelScroll();
  • smoothScroll — экземпляр Smooth Scroll, созданный через конструктор new SmoothScroll().
  • Метод не принимает аргументов и не возвращает значений.

Поведение метода

  1. Прерывание текущей анимации Если в момент вызова метода происходит плавная прокрутка к якорю или элементу страницы, она останавливается мгновенно. Положение страницы фиксируется на текущем моменте.

  2. Сброс внутренних таймеров Smooth Scroll использует requestAnimationFrame для анимации. Вызов cancelScroll() очищает все активные таймеры и внутренние состояния, связанные с текущей анимацией.

  3. Безопасность повторных вызовов Метод можно вызывать несколько раз подряд, без риска возникновения ошибок или конфликтов в логике прокрутки.

Примеры использования

1. Отмена анимации по клику на кнопку

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

document.querySelector('#stopButton').addEventListener('click', () => {
  scroll.cancelScroll();
});

В этом примере, если пользователь инициировал плавную прокрутку по ссылке и нажимает кнопку с id="stopButton", текущая анимация мгновенно прекращается.

2. Прерывание при наведении на элемент

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

document.querySelector('#hoverArea').addEventListener('mouseenter', () => {
  scroll.cancelScroll();
});

При наведении на область #hoverArea прокрутка останавливается, предотвращая нежелательное движение страницы во время интерактивных действий пользователя.

Практические сценарии использования

  • Интерактивные интерфейсы: когда пользователи часто переключаются между элементами страницы вручную.
  • Динамическое обновление контента: если после загрузки данных структура страницы меняется, прежняя анимация может стать некорректной.
  • Одновременные анимации: предотвращение конфликтов, когда несколько триггеров запускают разные прокрутки в один момент.
  • Реакция на действия пользователя: например, отмена прокрутки при скролле колесиком мыши или при касании сенсорного экрана.

Важные нюансы

  1. Совместимость с настройками Smooth Scroll Если у экземпляра включены опции speed или offset, метод cancelScroll() не влияет на их значения. Он только прерывает текущую анимацию.

  2. Работа с асинхронными событиями В сценариях, где анимация запускается через setTimeout или промисы, cancelScroll() прекращает только ту анимацию, которая уже стартовала. Запланированные анимации не будут автоматически отменены.

  3. Взаимодействие с пользовательским скроллом После вызова метода пользователь может немедленно продолжить скроллинг вручную, без задержек или конфликтов с библиотекой.

Резюме

Метод cancelScroll() обеспечивает полный контроль над текущими анимациями Smooth Scroll, позволяя безопасно прерывать их в любой момент. Это критически важно для создания отзывчивых и предсказуемых интерфейсов, где прокрутка должна подчиняться логике пользователя и состоянию страницы.

Использование cancelScroll() рекомендуется в сочетании с событиями интерфейса, динамическими изменениями DOM и сценариями, где анимация может конфликтовать с действиями пользователя.

Оглавление