Готовые расширения сообщества

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

ScrollSpy

ScrollSpy расширяет Smooth Scroll возможностью отслеживания текущего видимого элемента на странице. Это полезно для динамических меню и навигационных панелей.

Основные возможности:

  • Автоматическое добавление активного класса к ссылкам навигации при прокрутке.
  • Настройка отступов для срабатывания активации элемента.
  • Поддержка горизонтальной и вертикальной прокрутки.
  • Возможность интеграции с IntersectionObserver для повышения производительности.

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

import SmoothScroll from 'smooth-scroll';
import ScrollSpy from 'smooth-scroll/dist/scrollspy.min.js';

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

const spy = new ScrollSpy({
  nav: '.menu a',
  section: 'section',
  activeClass: 'active',
  offset: 50
});

Hash Management

Расширение Hash Management позволяет синхронизировать URL с текущей прокруткой, обеспечивая глубокие ссылки на отдельные секции.

Возможности:

  • Обновление URL при прокрутке к элементу.
  • Возможность отключения добавления истории браузера.
  • Поддержка стандартных якорных ссылок (#id).
  • Совместимость с методами history.pushState и history.replaceState.

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

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

Параметр updateURL: true автоматически добавляет хэш к URL при скролле.

Easing Functions

Smooth Scroll поддерживает встроенные easing-функции, но сообщество создало расширения для добавления кастомных кривых анимации.

Основные функции:

  • easeInOutCubic, easeInQuad, easeOutQuart.
  • Поддержка пользовательских функций на основе математических формул.
  • Простая интеграция с базовыми настройками Smooth Scroll.

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

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

Для создания собственной кривой можно использовать функцию:

function customEasing(t) {
  return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3)/2;
}

И передавать её через параметр easing: customEasing.

Callbacks

Расширение Callbacks позволяет выполнять пользовательские функции на ключевых этапах прокрутки: до начала, во время и после завершения.

События:

  • before: вызывается перед началом скролла.
  • after: вызывается после завершения анимации.
  • cancel: срабатывает при отмене прокрутки пользователем.

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

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 700,
  before: (anchor, toggle) => {
    console.log('Начало прокрутки к:', anchor);
  },
  after: (anchor, toggle) => {
    console.log('Прокрутка завершена к:', anchor);
  }
});

Lazy Loading Integration

Некоторые расширения сообщества добавляют интеграцию с Lazy Loading изображений и элементов. Это позволяет плавной прокрутке корректно учитывать динамически загружаемый контент.

Особенности:

  • Автоматическая корректировка позиции после загрузки изображений.
  • Возможность привязки к событиям load и DOMContentLoaded.
  • Синхронизация с ScrollSpy и Hash Management.

Пример:

document.addEventListener('lazyloaded', function(e){
  scroll.update(); // обновление позиций после загрузки контента
});

Touch & Mobile Enhancements

Расширения для мобильных устройств улучшают отклик при таче и свайпе.

Возможности:

  • Инерционная прокрутка.
  • Ограничение вертикального или горизонтального скролла.
  • Настройка скорости и чувствительности свайпа.

Пример:

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

Интеграция с Frameworks

Сообщество предоставило готовые адаптации Smooth Scroll для популярных фронтенд-фреймворков:

  • React: обертки и хуки для компонентов с плавной прокруткой.
  • Vue: директивы v-smooth-scroll с настройкой скорости и easing.
  • Angular: сервисы для привязки ссылок к ScrollSpy и хэшам URL.

Пример для React:

import { useSmoothScroll } from 'smooth-scroll-react';

function Menu() {
  const scroll = useSmoothScroll({ speed: 500, offset: 60 });
  return <a href="#section1" onCl ick={scroll}>Перейти к секции 1</a>;
}

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

Оглавление