HTML-структура для горизонтального скролла

Для реализации горизонтального скролла с использованием библиотеки Locomotive Scroll необходимо правильно организовать HTML-структуру страницы. Библиотека работает с контейнерами и секциями, где каждая секция может быть прокручиваемой по вертикали или горизонтали. Для горизонтальной прокрутки ключевым моментом является использование контейнера с атрибутом data-scroll-container и направление прокрутки, установленное через CSS или атрибуты библиотеки.

Основной контейнер

Главный контейнер, в котором будет происходить прокрутка, должен быть обернут в элемент с атрибутом:

<div data-scroll-container>
  <!-- секции контента -->
</div>
  • data-scroll-container сообщает Locomotive Scroll, что именно этот элемент будет управлять прокруткой.
  • Внутри контейнера располагаются блоки, которые будут прокручиваться горизонтально.

Для горизонтального скролла рекомендуется также использовать CSS-свойство display: flex; с направлением строки:

[data-scroll-container] {
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
}

Секции контента

Каждая секция, которую необходимо прокручивать горизонтально, оформляется следующим образом:

<section data-scroll-section>
  <div class="horizontal-wrapper">
    <div class="horizontal-item">Содержимое 1</div>
    <div class="horizontal-item">Содержимое 2</div>
    <div class="horizontal-item">Содержимое 3</div>
  </div>
</section>

Особенности структуры:

  • Атрибут data-scroll-section указывает Locomotive Scroll, что это отдельная прокручиваемая секция.
  • Обёртка horizontal-wrapper содержит все горизонтальные элементы и управляет их размещением с помощью flex:
.horizontal-wrapper {
  display: flex;
  flex-direction: row;
  width: max-content;
}
.horizontal-item {
  min-width: 100vw; /* каждый элемент занимает весь экран */
  height: 100vh;
}
  • Использование width: max-content у обёртки гарантирует, что контейнер будет расширяться по ширине под количество элементов, создавая горизонтальный скролл.

Атрибуты для управления прокруткой

Locomotive Scroll позволяет управлять прокруткой через атрибуты:

  • data-scroll — активирует прокрутку элемента.
  • data-scroll-speed — задаёт скорость движения элемента относительно прокрутки.
  • data-scroll-direction="horizontal" — указывает направление прокрутки конкретной секции.

Пример секции с горизонтальным скроллом:

<section data-scroll-section data-scroll-direction="horizontal">
  <div class="horizontal-wrapper">
    <div class="horizontal-item" data-scroll data-scroll-speed="2">Элемент A</div>
    <div class="horizontal-item" data-scroll data-scroll-speed="1">Элемент B</div>
    <div class="horizontal-item" data-scroll data-scroll-speed="0.5">Элемент C</div>
  </div>
</section>

Ключевые моменты:

  • data-scroll-direction="horizontal" нужно указывать на секцию, чтобы Locomotive Scroll корректно обрабатывал горизонтальную прокрутку.
  • Атрибут data-scroll-speed позволяет создавать параллакс-эффекты при горизонтальной прокрутке.

Использование якорей и snap-позиционирования

Для удобной навигации между горизонтальными элементами можно применять CSS Scroll Snap:

.horizontal-wrapper {
  scroll-snap-type: x mandatory;
}
.horizontal-item {
  scroll-snap-align: start;
}
  • scroll-snap-type: x mandatory включает «привязку» к элементам по горизонтали.
  • scroll-snap-align: start фиксирует начало каждого элемента при остановке прокрутки.

Это особенно полезно, если горизонтальный скролл включает несколько полноэкранных блоков.

Важные рекомендации

  1. Контейнер с горизонтальным скроллом должен быть внутри data-scroll-container.
  2. Использовать display: flex; flex-direction: row; для обёртки горизонтальных элементов.
  3. Атрибут data-scroll-direction="horizontal" необходимо добавлять на секции, где прокрутка горизонтальная.
  4. Для элементов с параллаксом использовать data-scroll и data-scroll-speed.
  5. В сочетании с CSS Scroll Snap можно добиться «чистого» горизонтального скролла с фиксированными позициями элементов.

Если потребуется, можно дополнительно использовать вложенные контейнеры для смешанного вертикального и горизонтального скролла, где вертикальная прокрутка управляет секциями, а горизонтальная — содержимым каждой секции. Такая структура позволяет создавать комплексные страницы с интерактивными горизонтальными блоками.

Оглавление