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

Waypoints — это лёгкая библиотека JavaScript для отслеживания положения элементов на странице относительно окна просмотра. Хотя чаще всего она используется для вертикальной прокрутки, Waypoints также поддерживает управление горизонтальной прокруткой, что позволяет создавать интерактивные эффекты при скролле по оси X.

Настройка горизонтального Waypoint

Для работы с горизонтальной прокруткой необходимо:

  1. Создать контейнер с горизонтальной прокруткой:
<div class="scroll-container">
    <div class="scroll-item">Элемент 1</div>
    <div class="scroll-item">Элемент 2</div>
    <div class="scroll-item">Элемент 3</div>
</div>
.scroll-container {
    display: flex;
    overflow-x: auto;
    width: 100%;
    scroll-behavior: smooth;
}

.scroll-item {
    min-width: 300px;
    margin-right: 20px;
    background-color: #f0f0f0;
    padding: 40px;
    text-align: center;
}
  1. Инициализировать Waypoint с горизонтальной осью:

Waypoints поддерживает параметр horizontal: true. Это переключает расчёт смещения с вертикальной оси (top) на горизонтальную (left).

var waypoint = new Waypoint({
  element: document.querySelector('.scroll-item'),
  handler: function(direction) {
    if (direction === 'right') {
        console.log('Элемент достигнут при движении вправо');
    } else {
        console.log('Элемент достигнут при движении влево');
    }
  },
  horizontal: true,
  offset: '50%'
});

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

  • element — элемент, за которым следят.
  • handler — функция, вызываемая при достижении элемента.
  • horizontal: true — включает горизонтальный режим.
  • offset — определяет точку срабатывания в процентах от видимой ширины контейнера.

Управление несколькими Waypoints

Для горизонтальной галереи или карусели часто требуется отслеживать несколько элементов одновременно. Для этого можно создавать массив Waypoints:

var items = document.querySelectorAll('.scroll-item');

items.forEach(function(item) {
  new Waypoint({
    element: item,
    handler: function(direction) {
      console.log(item.textContent + ' достигнут при ' + direction);
    },
    horizontal: true,
    offset: '25%' 
  });
});

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

  • Использование forEach позволяет назначить отдельный обработчик на каждый элемент.
  • offset можно настраивать индивидуально, чтобы элементы срабатывали раньше или позже при скролле.
  • direction принимает значения 'right' или 'left'.

Sticky-эффекты при горизонтальной прокрутке

Waypoints совместим с Sticky elements, когда нужно закреплять блоки при достижении определённого положения:

var sticky = new Waypoint.Sticky({
  element: document.querySelector('.scroll-item'),
  wrapper: '<div class="sticky-wrapper" />',
  horizontal: true
});
  • wrapper используется для сохранения пространства в потоке документа.
  • Sticky-элементы корректно закрепляются при движении контейнера по горизонтали.

Использование Horizontal Inview

Waypoints поддерживает плагин Inview, который позволяет отслеживать, когда элемент входит или выходит из видимой области горизонтального контейнера:

var inview = new Waypoint.Inview({
  element: document.querySelector('.scroll-item'),
  enter: function(direction) {
    console.log('Элемент вошёл в видимую область: ' + direction);
  },
  exit: function(direction) {
    console.log('Элемент покинул видимую область: ' + direction);
  },
  horizontal: true
});

Важные нюансы:

  • enter срабатывает при пересечении любой границы элемента с областью видимости.
  • exit вызывается при полном выходе элемента за пределы контейнера.
  • direction сообщает направление движения: 'right' или 'left'.

Производительность при горизонтальном скролле

При большом количестве элементов важно оптимизировать производительность:

  • Throttle и debounce событий скролла не нужны, Waypoints использует оптимизированные слушатели.
  • Для длинных горизонтальных списков имеет смысл ограничивать количество активных Waypoints в видимой области.
  • Использование offset позволяет уменьшить количество срабатываний для элементов вне экрана.

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

  1. Горизонтальная галерея с подсветкой текущего элемента:
var items = document.querySelectorAll('.scroll-item');

items.forEach(function(item) {
  new Waypoint({
    element: item,
    handler: function(direction) {
      items.forEach(el => el.classList.remove('active'));
      item.classList.add('active');
    },
    horizontal: true,
    offset: '50%'
  });
});
  1. Анимация при прокрутке горизонтальной линии:
new Waypoint({
  element: document.querySelector('.scroll-line'),
  handler: function(direction) {
    document.querySelector('.scroll-line').classList.add('animate');
  },
  horizontal: true,
  offset: '75%'
});

Закрепление концепций

  • Горизонтальный Waypoint отличается только параметром horizontal: true и направлениями 'right' / 'left'.
  • offset контролирует момент срабатывания относительно ширины окна.
  • Для нескольких элементов удобно использовать массив и цикл, а для sticky-эффектов применяются специальные методы Waypoint.Sticky.
  • Inview-плагин расширяет возможности отслеживания появления/исчезновения элементов на горизонтальной оси.

Использование Waypoints для горизонтальной прокрутки позволяет создавать интерактивные галереи, карусели и анимации, сохраняя производительность и простоту кода.

Оглавление