Горизонтальная прокрутка

Smooth Scroll — это библиотека для плавной анимации прокрутки в веб-страницах, которая позволяет контролировать как вертикальную, так и горизонтальную навигацию. Горизонтальная прокрутка особенно полезна для галерей, каруселей, таблиц с большим количеством колонок и интерфейсов типа «timeline». Библиотека обеспечивает управление скоростью, продолжительностью и кривой анимации прокрутки.

// Инициализация Smooth Scroll для горизонтальной прокрутки
const scroll = new SmoothScroll('.scroll-link', {
  speed: 800,
  offset: 0,
  easing: 'easeInOutCubic',
  direction: 'horizontal'
});

Ключевые параметры для горизонтальной прокрутки:

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

Привязка к элементам страницы

Smooth Scroll позволяет назначать элементы, кликая по которым будет происходить анимация. Для горизонтальной прокрутки целевые элементы должны располагаться в горизонтальном контейнере с overflow-x: scroll.

<div class="scroll-container">
  <section id="section1" class="scroll-section">Секция 1</section>
  <section id="section2" class="scroll-section">Секция 2</section>
  <section id="section3" class="scroll-section">Секция 3</section>
</div>

<a href="#section2" class="scroll-link">Перейти к секции 2</a>
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  width: 100%;
}

.scroll-section {
  flex: 0 0 300px;
  margin-right: 20px;
}

В этом примере Smooth Scroll плавно перемещает контейнер по горизонтали к нужной секции при клике на ссылку.

Работа с координатами

Для горизонтальной прокрутки библиотека оперирует свойством scrollLeft контейнера. Внутренние методы Smooth Scroll автоматически вычисляют позицию целевого элемента и выполняют анимацию.

scroll.animateScroll(document.querySelector('#section3'));

Здесь происходит плавная прокрутка контейнера к элементу с id="section3".

Важно учитывать: если контейнер не имеет явно заданной ширины или не установлен display: flex/inline-flex, библиотека может некорректно вычислить позицию элемента.

Настройка кривых анимации

Плавность движения задаётся через параметр easing. Горизонтальная прокрутка особенно чувствительна к плавности, так как глаз быстрее фиксирует резкие изменения по горизонтали. Примеры наиболее часто используемых функций:

  • linear — равномерная скорость.
  • easeInOutCubic — медленное начало и конец, быстрый середина.
  • easeOutQuart — ускорение в начале, плавная остановка.
const scroll = new SmoothScroll('.scroll-link', {
  direction: 'horizontal',
  speed: 1000,
  easing: 'easeOutQuart'
});

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

Если содержимое контейнера изменяется динамически, важно вызывать метод пересчета размеров:

scroll.update();

Это гарантирует, что новые секции будут корректно учтены в расчете горизонтальной позиции.

Управление скроллом через API

Smooth Scroll предоставляет API для прямого управления:

  • animateScroll(target, options) — плавная прокрутка к целевому элементу.
  • update() — обновление размеров контейнеров и элементов.
  • cancelScroll() — прерывание текущей анимации.
// Прерывание анимации при клике на кнопку "Стоп"
document.querySelector('.stop-btn').addEventListener('click', () => {
  scroll.cancelScroll();
});

Горизонтальная прокрутка на мобильных устройствах

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

Сочетание с CSS-свойствами

Smooth Scroll отлично работает с CSS-свойством scroll-snap-type для «прилипания» к секциям:

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.scroll-section {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

В комбинации с библиотекой это позволяет плавно прокручивать контент с эффектом «прилипания» к каждому элементу.

Обработка нескольких контейнеров

Можно управлять несколькими горизонтальными контейнерами одновременно. Для этого создается отдельный экземпляр Smooth Scroll для каждого контейнера:

const galleryScroll = new SmoothScroll('.gallery-link', { direction: 'horizontal' });
const timelineScroll = new SmoothScroll('.timeline-link', { direction: 'horizontal' });

Каждый экземпляр независимо вычисляет позиции своих целевых элементов, что обеспечивает гибкость при сложных интерфейсах.

Резюме ключевых особенностей горизонтальной прокрутки

  • Плавная анимация с контролем скорости и кривой движения.
  • Прямой доступ к методам управления через API (animateScroll, update, cancelScroll).
  • Поддержка динамического контента и мобильных жестов.
  • Интеграция с CSS-свойствами scroll-snap-type и flex для корректного позиционирования.
  • Возможность работы с несколькими контейнерами одновременно.

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

Оглавление