cancel - при отмене анимации

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

Метод cancel()

Метод cancel() предназначен для немедленной остановки активной анимации прокрутки. Его синтаксис прост:

const scroll = new SmoothScroll();
scroll.cancel();

Особенности работы:

  • Остановка происходит мгновенно, текущая позиция страницы фиксируется.
  • Если вызов cancel() происходит вне активной анимации, метод не вызывает ошибок и не влияет на поведение страницы.
  • Поддерживает прерывание как ручной, так и программной прокрутки, созданной через scroll.animateScroll().

Прерывание анимации по событию

Одним из распространённых сценариев является прерывание прокрутки пользователем, например, при клике или скролле мышью. Для этого можно использовать cancel() в сочетании с обработчиками событий:

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

document.addEventListener('wheel', () => {
  scroll.cancel();
});

document.addEventListener('touchstart', () => {
  scroll.cancel();
});

В этом примере:

  • Любое взаимодействие с колесиком мыши (wheel) или касанием экрана (touchstart) мгновенно останавливает анимацию.
  • Это обеспечивает естественное ощущение управления прокруткой, не заставляя пользователя ждать завершения автоматической анимации.

Отмена программной прокрутки

Метод animateScroll() возвращает объект анимации, который можно сохранить и контролировать:

const scroll = new SmoothScroll();
const animation = scroll.animateScroll(document.querySelector('#section2'));

setTimeout(() => {
  scroll.cancel(); // отменяет прокрутку через 500 мс
}, 500);

Здесь:

  • Прокрутка инициируется к элементу с id section2.
  • Через 500 миллисекунд анимация будет прервана, фиксируя текущую позицию страницы.
  • Этот подход позволяет создавать динамичные интерфейсы, где прокрутка может быть отменена по условию или событию.

Особенности работы с cancel в конфигурации

Smooth Scroll позволяет задавать глобальные параметры поведения прокрутки. Некоторые параметры влияют на логику отмены:

  • speed: время анимации в миллисекундах. Чем больше значение, тем более заметно влияние метода cancel() при прерывании.
  • offset: смещение от цели. Даже при отмене прокрутки, текущая позиция будет вычислена с учетом смещения.
  • easing: функция плавности. Отмена происходит мгновенно, независимо от установленной функции easing.

Пример настройки:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 1000,
  offset: 100,
  easing: 'easeInOutCubic'
});

Даже с такой конфигурацией метод cancel() остановит анимацию без остаточного дрожания или дергания страницы.

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

  1. Использовать с пользовательскими событиями: Wheel, touchstart, keydown – для естественного поведения интерфейса.
  2. Комбинировать с логикой интерфейса: Например, отменять анимацию при открытии модального окна или переключении вкладок.
  3. Сохранять ссылку на объект прокрутки, если планируется управление несколькими анимациями одновременно.
  4. Не использовать в цикле без условий: Метод cancel() мгновенно фиксирует позицию, повторный вызов без активной прокрутки неэффективен, но безопасен.

Примеры сложных сценариев

Прерывание при наведении и изменении состояния интерфейса:

const scroll = new SmoothScroll();

document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('mouseenter', () => scroll.cancel());
});

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

Условная отмена:

const scroll = new SmoothScroll();

function conditionalCancel() {
  if (window.innerWidth < 768) {
    scroll.cancel();
  }
}

document.addEventListener('wheel', conditionalCancel);

В этом примере прокрутка отменяется только на устройствах с шириной экрана меньше 768 пикселей, обеспечивая адаптивное поведение.

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

Оглавление