Направление прокрутки

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

Основная концепция направления

В Waypoints направление прокрутки определяется как:

  • “down” — когда страница прокручивается вниз, то есть пользователь движется от верхней части документа к нижней.
  • “up” — когда страница прокручивается вверх, т.е. от нижней части документа к верхней.

Это направление автоматически передаётся в коллбэк-функцию waypoint и может использоваться для условного выполнения кода.

Пример базового создания waypoint с учётом направления:

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Прокрутка вниз — активируем анимацию секции');
    } else if (direction === 'up') {
      console.log('Прокрутка вверх — деактивируем анимацию секции');
    }
  }
});

В этом примере при пересечении элемента section1 событие срабатывает, и через параметр direction определяется, в каком направлении произошло пересечение.

Использование direction для разных эффектов

1. Анимация при входе и выходе секции

Можно запускать различные анимации в зависимости от направления прокрутки:

var waypoint = new Waypoint({
  element: document.getElementById('feature'),
  handler: function(direction) {
    if (direction === 'down') {
      document.getElementById('feature').classList.add('fade-in');
    } else {
      document.getElementById('feature').classList.remove('fade-in');
    }
  },
  offset: '50%' // срабатывание при достижении середины окна
});

2. Ленивая загрузка контента

Направление прокрутки удобно для подгрузки данных только при прокрутке вниз:

var loadMoreWaypoint = new Waypoint({
  element: document.getElementById('load-more-trigger'),
  handler: function(direction) {
    if (direction === 'down') {
      loadAdditionalContent();
    }
  },
  offset: '100%'
});

3. Управление фиксированными элементами

Направление позволяет управлять видимостью фиксированных элементов, таких как шапка или боковая панель:

var stickyHeader = new Waypoint({
  element: document.getElementById('main-content'),
  handler: function(direction) {
    if (direction === 'down') {
      document.querySelector('header').classList.add('hidden');
    } else {
      document.querySelector('header').classList.remove('hidden');
    }
  },
  offset: 100
});

Расширенные возможности с offset и continuous

  • offset позволяет задать точку срабатывания waypoint относительно верха окна. Например, offset: '75%' активирует waypoint, когда элемент достиг 75% высоты окна. Направление прокрутки при этом остаётся доступным через direction.

  • continuous определяет, будет ли waypoint срабатывать несколько раз при быстром скролле. По умолчанию continuous: true, что позволяет учитывать все направления при пересечении элемента несколько раз.

Несколько waypoint для одного элемента

Можно создавать несколько waypoint для одного DOM-элемента с разными offset и условиями направления:

var upWaypoint = new Waypoint({
  element: document.getElementById('section2'),
  handler: function(direction) {
    if (direction === 'up') {
      console.log('Пользователь прокрутил вверх через section2');
    }
  },
  offset: '20%'
});

var downWaypoint = new Waypoint({
  element: document.getElementById('section2'),
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Пользователь прокрутил вниз через section2');
    }
  },
  offset: '80%'
});

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

Практические советы

  • Всегда проверять значение direction перед выполнением действий, особенно при одновременном наличии нескольких waypoint на странице.
  • Комбинирование direction с offset и continuous даёт максимальную гибкость в анимации и динамическом подгрузе элементов.
  • Для сложных интерфейсов можно объединять waypoint с библиотеками анимации (GSAP, Anime.js) для плавного реагирования на прокрутку вверх и вниз.

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

Оглавление