Метод previous

Метод previous является частью API библиотеки Waypoints и предназначен для управления навигацией по созданным точкам (waypoints) в обратном порядке. Он позволяет программно активировать предыдущую waypoint относительно текущей, что особенно полезно при создании прокручиваемых интерфейсов, каруселей контента и анимаций, зависящих от позиции прокрутки.

Синтаксис

waypoint.previous([options]);

Параметры:

  • options (необязательный объект) – объект с дополнительными настройками поведения метода.

Основные свойства объекта options:

  • triggerOnce (Boolean) – если установлено в true, waypoint сработает один раз и не будет повторно активироваться при последующих вызовах previous.
  • offset (Number или String) – смещение относительно верхней границы контейнера, аналогично свойству offset при создании waypoint. Позволяет точно контролировать момент активации.

Принцип работы

Метод previous инициирует активацию предыдущей точки в коллекции waypoint текущего элемента. Порядок точек определяется их порядком в DOM, а также настройками при создании waypoint (context, horizontal и т.д.). Если текущая активная waypoint является первой, вызов previous не вызовет ошибку, но активировать нечего.

Пример:

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

// Переход к предыдущей waypoint
waypoint.previous();

В этом примере метод previous попытается активировать waypoint, находящуюся перед section2. Если такой waypoint существует, будет вызван её обработчик с аргументом direction, указывающим направление движения (up или down).

Использование с коллекциями waypoint

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

var group = new Waypoint.Group({name: 'sections'});
var waypoint1 = new Waypoint({element: document.getElementById('section1'), group: group});
var waypoint2 = new Waypoint({element: document.getElementById('section2'), group: group});

waypoint2.previous(); // активирует waypoint1

Если группа содержит несколько waypoint с одинаковым элементом, метод previous активирует ближайшую к текущей в обратном порядке.

Особенности взаимодействия с offset и context

Метод previous учитывает те же параметры offset и context, что и обычные waypoint. Это позволяет выполнять точную навигацию по прокрутке. Например:

var waypoint = new Waypoint({
  element: document.getElementById('section3'),
  offset: '25%',
  handler: function(direction) {
    console.log('Triggered at 25% offset', direction);
  }
});

// Активировать предыдущую waypoint с пользовательским смещением
waypoint.previous({ offset: '10%' });

В данном случае активация предыдущей waypoint произойдет, когда верхняя граница элемента окажется на 10% от высоты контейнера.

Обработка событий при вызове previous

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

waypoint.previous({
  triggerOnce: true
});

Здесь обработчик waypoint сработает один раз, даже если метод будет вызван несколько раз подряд.

Ограничения и нюансы

  1. Первая waypoint: если текущая waypoint является первой в своей группе или списке, вызов previous не приведет к ошибке, но обработчик предыдущей waypoint не вызовется, так как её нет.
  2. Группы waypoint: метод ориентируется на порядок в группе. Если waypoint не принадлежит группе, активируется предыдущая в порядке DOM.
  3. Синхронизация с анимациями: при использовании previous вместе с анимациями важно учитывать время их завершения, чтобы не возникало конфликтов между событиями waypoint и визуальными эффектами.
  4. Совместимость с горизонтальной прокруткой: метод корректно работает как с вертикальными, так и с горизонтальными waypoint при задании свойства horizontal: true.

Примеры практического применения

Навигация по разделам страницы:

var sections = document.querySelectorAll('.section');
sections.forEach(function(section) {
  new Waypoint({
    element: section,
    handler: function(direction) {
      console.log(section.id, direction);
    }
  });
});

// Программное возвращение к предыдущему разделу
document.getElementById('prevButton').addEventListener('click', function() {
  var activeWaypoint = Waypoint.getActiveWaypoints()[0];
  activeWaypoint.previous();
});

Анимация контента при прокрутке вверх:

var fadeInSection = new Waypoint({
  element: document.getElementById('fadeSection'),
  handler: function(direction) {
    if(direction === 'up') {
      this.element.classList.add('fade-in');
    }
  }
});

// Активировать вручную предыдущую waypoint
fadeInSection.previous();

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

Оглавление