Константы

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

Направления движения

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

  • 'down' — указывает, что элемент пересёк точку активации при прокрутке вниз.
  • 'up' — указывает, что элемент пересёк точку активации при прокрутке вверх.

Эти константы часто применяются внутри колбэк-функций Waypoint для проверки направления движения:

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Скролл вниз: элемент активирован');
    } else if (direction === 'up') {
      console.log('Скролл вверх: элемент активирован');
    }
  }
});

Триггерные события

Waypoints предоставляет константы для разных событий прокрутки:

  • 'enter' — элемент пересёк точку активации и вошёл в видимую область.
  • 'exit' — элемент покинул точку активации.
  • 'trigger' — событие, явно вызываемое методом .trigger().

Эти константы особенно полезны при работе с библиотекой Inview, расширяющей возможности Waypoints для отслеживания видимости элементов:

var inviewWaypoint = new Waypoint.Inview({
  element: document.getElementById('image'),
  enter: function(direction) {
    console.log('Элемент вошёл в видимую область');
  },
  exited: function(direction) {
    console.log('Элемент покинул видимую область');
  }
});

Типы Waypoints

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

  • 'vertical' — отслеживание вертикальной прокрутки (по умолчанию).
  • 'horizontal' — отслеживание горизонтальной прокрутки.
  • 'sticky' — фиксированное положение элемента при прокрутке (используется вместе с Sticky Waypoints).

Выбор типа влияет на то, как рассчитывается позиция точки активации и направление движения:

var horizontalWaypoint = new Waypoint({
  element: document.getElementById('slider'),
  handler: function(direction) {
    console.log('Горизонтальная прокрутка:', direction);
  },
  horizontal: true
});

Контейнеры и контексты

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

  • Waypoints.Adapter — адаптер для работы с разными библиотеками DOM (jQuery, Zepto, нативный JS).
  • context — объект, содержащий методы для получения текущей позиции прокрутки и размеров контейнера.

Эти константы позволяют создавать гибкие и переносимые решения без привязки к конкретной библиотеке:

var context = new Waypoint.Context(document.getElementById('scroll-container'));
var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    console.log('Событие в контексте контейнера', direction);
  },
  context: context
});

Настройка оффсета с помощью констант

Waypoints позволяет задавать точку срабатывания через оффсет. В качестве констант можно использовать:

  • 'bottom-in-view' — срабатывание, когда нижняя граница элемента появляется в области просмотра.
  • 'top-in-view' — срабатывание, когда верхняя граница элемента появляется в области просмотра.
  • Процентное значение, например '50%', для точного позиционирования активации.

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

var waypoint = new Waypoint({
  element: document.getElementById('section2'),
  handler: function(direction) {
    console.log('Секция достигла 50% видимости', direction);
  },
  offset: '50%'
});

Закрепление поведения с константами

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

  • continuous — если true, Waypoint будет срабатывать при каждом пересечении точки активации.
  • enabled — включение или отключение конкретного Waypoint через waypoint.enable() / waypoint.disable().
  • group — объединение Waypoints в группы, позволяющее массово управлять их срабатыванием.

Пример объединения в группу:

var group = Waypoint.Group.findOrCreate({ name: 'myGroup' });
var waypoint = new Waypoint({
  element: document.getElementById('section3'),
  handler: function(direction) {
    console.log('Секция из группы myGroup активирована', direction);
  },
  group: group
});

Резюме по константам

  • Направления движения: 'down', 'up'.
  • События: 'enter', 'exit', 'trigger'.
  • Типы: 'vertical', 'horizontal', 'sticky'.
  • Оффсеты: 'top-in-view', 'bottom-in-view', процентные значения.
  • Поведение: continuous, enabled, group.
  • Контексты: Waypoints.Adapter, context.

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

Оглавление