Индикаторы прокрутки

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

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

Настройка Smooth Scroll для работы с индикаторами

Для интеграции индикатора прокрутки с Smooth Scroll необходимо инициализировать объект библиотеки с соответствующими настройками:

import SmoothScroll from 'smooth-scroll';

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

Ключевые параметры:

  • speed — скорость анимации в миллисекундах.
  • offset — смещение относительно целевого элемента, полезно при фиксированных шапках.
  • easing — функция плавности движения (linear, easeInOutCubic, easeOutQuad и другие).

Индикаторы прокрутки обычно требуют вычисления текущей позиции относительно всей страницы. Smooth Scroll предоставляет события и методы, которые позволяют получать текущую позицию прокрутки в реальном времени.

Создание кастомного индикатора прокрутки

Для кастомного прогресс-бара можно использовать простой <div> с абсолютным позиционированием:

<div id="scroll-indicator"></div>
#scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background-color: #3498db;
  width: 0%;
  z-index: 9999;
}

Обновление индикатора при прокрутке:

const indicator = document.getElementById('scroll-indicator');

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  const progress = (scrollTop / scrollHeight) * 100;
  indicator.style.width = progress + '%';
});

Этот подход позволяет синхронизировать индикатор с прокруткой Smooth Scroll, обеспечивая плавный визуальный эффект.

Интеграция Smooth Scroll с динамическими контейнерами

Если используется прокрутка внутри определённого блока, а не всей страницы, необходимо:

  1. Вычислять высоту и позицию контейнера.
  2. Использовать события Smooth Scroll для отслеживания целевых элементов.
  3. Обновлять индикатор относительно локального scrollTop контейнера:
const container = document.querySelector('.scroll-container');
const indicator = document.getElementById('container-indicator');

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight - container.clientHeight;
  const progress = (scrollTop / scrollHeight) * 100;
  indicator.style.width = progress + '%';
});

События Smooth Scroll для расширенной работы с индикаторами

Smooth Scroll предоставляет события:

  • scrollStart — запуск анимации прокрутки.
  • scrollStop — завершение анимации.
  • scrollMove — непрерывное движение, полезно для синхронизации прогресс-бара.

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

scroll.animateScroll = function(target, options) {
  const updateIndicator = () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
    indicator.style.width = (scrollTop / scrollHeight * 100) + '%';
    requestAnimationFrame(updateIndicator);
  };
  updateIndicator();
};

Анимация индикатора при завершении прокрутки

Для плавного завершения прогресс-бара после анимации Smooth Scroll можно использовать CSS-переход:

#scroll-indicator {
  transition: width 0.2s ease-out;
}

Это сглаживает резкие изменения ширины при завершении скролла.

Продвинутые техники

  1. Вертикальные и горизонтальные индикаторы Можно создавать прогресс-бары по бокам или снизу страницы, меняя свойства height и top/left.

  2. Сегментированные индикаторы Для многостраничных или лендингов с секциями можно делить индикатор на сегменты и подсвечивать текущую секцию.

  3. Синхронизация с параллаксом Smooth Scroll поддерживает плавную анимацию прокрутки, что позволяет интегрировать индикаторы с эффектами параллакса.

Выводы по реализации

  • Индикаторы прокрутки тесно связаны с текущей позицией scrollTop и высотой контента.
  • Smooth Scroll упрощает обработку событий прокрутки и позволяет синхронизировать индикатор с анимацией.
  • Кастомизация индикаторов осуществляется через CSS и динамическое обновление стилей через JavaScript.

Эти подходы создают интерактивные и визуально привлекательные элементы интерфейса, повышая удобство навигации и восприятие контента.

Оглавление