Множественные направления

Waypoints — это мощная библиотека для отслеживания положения элементов на странице и выполнения определённых действий при достижении пользователем конкретных точек прокрутки. Одной из наиболее продвинутых возможностей является работа с множественными направлениями (multi-directional waypoints), позволяющая реагировать как на прокрутку вниз, так и вверх, а также на другие сценарии движения пользователя.

Основы работы с направлениями

По умолчанию Waypoints поддерживает событие down (при прокрутке вниз) и up (при прокрутке вверх). При создании waypoint можно указать опцию handler, которая получает аргумент direction, позволяющий определить, в каком направлении происходит движение:

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

Ключевой момент: direction всегда указывает направление движения относительно viewport, а не исходное направление страницы.

Настройка offset для разных направлений

Offset — это расстояние от верхней границы viewport до элемента, при котором срабатывает waypoint. Можно задавать разные значения offset для направления вниз и вверх:

var waypoint = new Waypoint({
  element: document.getElementById('section2'),
  handler: function(direction) {
    console.log('Достигнут waypoint для', direction);
  },
  offset: function() {
    return this.element.clientHeight / 2;
  }
});

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

Множественные waypoint для одного элемента

Для одного элемента можно создавать несколько waypoint с различными параметрами и обработчиками, чтобы реагировать на разные направления и позиции прокрутки:

var section = document.getElementById('section3');

new Waypoint({
  element: section,
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Секция 3: вниз');
    }
  },
  offset: '25%'
});

new Waypoint({
  element: section,
  handler: function(direction) {
    if (direction === 'up') {
      console.log('Секция 3: вверх');
    }
  },
  offset: '75%'
});

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

Группы и множественные направления

Waypoints поддерживает объединение waypoint в группы. Это удобно для синхронизации событий и управления множественными элементами:

var group = Waypoint.Group.findOrCreate({ name: 'sections' });

new Waypoint({
  element: document.getElementById('section4'),
  handler: function(direction) {
    console.log('Section 4', direction);
  },
  group: group,
  offset: '50%'
});

new Waypoint({
  element: document.getElementById('section5'),
  handler: function(direction) {
    console.log('Section 5', direction);
  },
  group: group,
  offset: '50%'
});

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

Контроль срабатывания waypoint при множественных направлениях

Waypoints предоставляет методы disable(), enable() и destroy(), которые позволяют контролировать срабатывание waypoint в зависимости от направления прокрутки:

var waypoint = new Waypoint({
  element: document.getElementById('section6'),
  handler: function(direction) {
    console.log(direction);
    if (direction === 'up') {
      this.disable();
    }
  }
});

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

События и обратные вызовы

Помимо основного handler, можно использовать события waypoint.reached и waypoint.exit, чтобы получить более точный контроль над множественными направлениями:

var waypoint = new Waypoint({
  element: document.getElementById('section7'),
  handler: function(direction) {}
});

waypoint.on('reached', function(direction) {
  console.log('Waypoint достигнут', direction);
});

waypoint.on('exit', function(direction) {
  console.log('Waypoint покинут', direction);
});

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

Советы по оптимизации

  • Использовать continuous: false, если нужны только первые срабатывания при достижении waypoint в любом направлении.
  • Делать throttle или debounce обработчики при множественных waypoint на странице, чтобы снизить нагрузку при интенсивной прокрутке.
  • Проверять видимость элемента, используя element.getBoundingClientRect(), для динамических интерфейсов, где размер элементов меняется после загрузки контента.

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

Оглавление