Опции конфигурации

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

element

Обязательная опция. Указывает DOM-элемент, на котором будет установлен waypoint. Пример:

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    console.log('Waypoint сработал', direction);
  }
});
  • Тип: HTMLElement
  • Назначение: Определяет, за каким элементом будет отслеживаться скролл.
  • Особенности: Если элемент отсутствует в DOM на момент создания waypoint, будет выброшена ошибка.

handler

Функция, которая выполняется при срабатывании waypoint. Принимает один аргумент direction, который может быть "down" или "up":

handler: function(direction) {
  if (direction === 'down') {
    console.log('Элемент виден при скролле вниз');
  } else {
    console.log('Элемент виден при скролле вверх');
  }
}
  • Тип: Function
  • Назначение: Основная логика действия при достижении точки.
  • Особенности: Можно использовать стрелочные функции, но важно помнить, что this внутри стрелочной функции будет ссылаться на внешний контекст, а не на waypoint.

offset

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

  • Типы значений:

    • Число (в пикселях) – фиксированное смещение от верха окна:

      offset: 100 // срабатывает когда верх элемента на 100px ниже верхней границы окна

    • Строка с процентом – относительно высоты окна:

      offset: '50%' // срабатывает, когда элемент достигает середины окна

    • Функция – возвращает динамическое значение:

      offset: function() {
  return this.element.clientHeight / 2;
}

  • Особенности: При изменении размера окна рекомендуется пересоздавать waypoint или использовать метод Waypoint.refreshAll().

context

Позволяет задать родительский элемент скролла, отличный от window. По умолчанию waypoint отслеживает скролл всей страницы.

var waypoint = new Waypoint({
  element: document.getElementById('section2'),
  handler: function() { console.log('Waypoint в контейнере'); },
  context: document.getElementById('scrollable-container')
});
  • Тип: HTMLElement
  • Назначение: Используется для элементов с прокручиваемой областью (overflow: auto).
  • Особенности: Если не указан, автоматически используется window.

continuous

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

  • Тип: Boolean
  • Значение по умолчанию: true
  • Пример:
continuous: false

  • Описание:

    • true – waypoint может срабатывать несколько раз при быстром скролле через точку.
    • false – waypoint срабатывает только один раз при пересечении.

enabled

Позволяет включать или отключать waypoint без его удаления.

  • Тип: Boolean
  • Пример:
var waypoint = new Waypoint({...});
waypoint.disable(); // отключить waypoint
waypoint.enable();  // включить снова
  • Особенности: Управление состоянием удобно для временной блокировки обработки скролла.

group

Служит для объединения нескольких waypoint в одну группу, что влияет на порядок срабатывания.

  • Тип: String
  • Пример:
group: 'sections'

  • Назначение:

    • Позволяет контролировать последовательность срабатывания waypoint при быстром скролле.
    • Методы Waypoint.disableGroup() и Waypoint.enableGroup() позволяют управлять сразу всеми waypoint в группе.

horizontal

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

  • Тип: Boolean
  • Значение по умолчанию: false
  • Пример:
horizontal: true
  • Особенности: Используется в проектах с горизонтальными каруселями или прокруткой по оси X.

triggerOnce

Позволяет сделать waypoint одноразовым.

  • Тип: Boolean
  • Пример:
triggerOnce: true
  • Описание: Waypoint сработает один раз и автоматически отключится после первого срабатывания. Удобно для анимаций при первом появлении элемента на экране.

enabled, destroy и управление жизненным циклом

Waypoints предоставляют методы для динамического управления:

waypoint.disable();  // отключает
waypoint.enable();   // включает
waypoint.destroy();  // удаляет waypoint
  • destroy() полностью удаляет waypoint и освобождает ресурсы.
  • disable()/enable() позволяют временно приостановить обработку скролла.

Практическая комбинация опций

var waypoint = new Waypoint({
  element: document.getElementById('feature'),
  handler: function(direction) {
    console.log('Появление блока feature', direction);
  },
  offset: '75%',
  context: document.getElementById('scroll-container'),
  continuous: false,
  group: 'features',
  horizontal: false,
  triggerOnce: true
});

В этом примере:

  • Waypoint срабатывает при достижении элемента на 75% высоты окна.
  • Контекст скролла ограничен контейнером scroll-container.
  • Однократное срабатывание гарантирует, что анимация будет выполнена только один раз.
  • Элементы объединены в группу features для управления порядком срабатывания.

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

Оглавление