Работа с кастомными контейнерами

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

Инициализация Waypoint с кастомным контейнером

Для создания Waypoint с кастомным контейнером необходимо передать опцию context, которая указывает на DOM-элемент, выступающий в роли контейнера:

var container = document.querySelector('.scrollable-container');

var waypoint = new Waypoint({
  element: document.querySelector('.target-element'),
  handler: function(direction) {
    console.log('Waypoint triggered: ' + direction);
  },
  context: container
});

Ключевые моменты:

  • element — элемент, за которым отслеживается позиция внутри контейнера.
  • handler — функция, вызываемая при пересечении позиции.
  • context — кастомный контейнер, вместо стандартного окна (window).

Принцип работы кастомного контейнера

Waypoints рассчитывает позицию элемента относительно верхней границы контейнера. Если контейнер имеет CSS-свойство overflow: auto или overflow: scroll, Waypoints корректно отслеживает появление или скрытие элемента при прокрутке этого контейнера.

Важно помнить:

  1. Относительные координаты: Позиция элемента вычисляется относительно верхней границы контейнера, а не окна браузера.
  2. Поддержка нескольких контейнеров: Можно создавать несколько Waypoint с разными кастомными контейнерами на одной странице.

Пример с несколькими контейнерами:

var container1 = document.querySelector('.scrollable1');
var container2 = document.querySelector('.scrollable2');

new Waypoint({
  element: container1.querySelector('.target'),
  handler: function() { console.log('Triggered in container 1'); },
  context: container1
});

new Waypoint({
  element: container2.querySelector('.target'),
  handler: function() { console.log('Triggered in container 2'); },
  context: container2
});

Настройка смещения для кастомного контейнера

Waypoints позволяет задавать смещение (offset) для кастомных контейнеров, чтобы триггер происходил не в момент появления элемента у верхней границы, а с заданным сдвигом:

var waypoint = new Waypoint({
  element: document.querySelector('.target-element'),
  handler: function(direction) {
    console.log('Offset waypoint triggered');
  },
  context: document.querySelector('.scrollable-container'),
  offset: '50%' // Триггер срабатывает когда элемент проходит середину контейнера
});

Смещение может быть указано в пикселях (200) или в процентах ('50%'). Процент вычисляется относительно высоты контейнера.

Управление кастомными контейнерами

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

  • waypoint.destroy() — удаляет Waypoint и очищает все слушатели для контейнера.
  • Waypoint.refreshAll() — пересчитывает позиции всех Waypoint, полезно, когда содержимое контейнера меняет размер динамически.
  • Waypoint.disable() и Waypoint.enable() — временно отключают или включают триггеры.

Пример динамического обновления:

var waypoint = new Waypoint({
  element: document.querySelector('.target-element'),
  handler: function() { console.log('Triggered'); },
  context: document.querySelector('.scrollable-container')
});

// После изменения содержимого контейнера
Waypoint.refreshAll();

Особенности взаимодействия с CSS и DOM

  1. overflow контейнера: Для корректной работы кастомного контейнера необходимо, чтобы CSS-свойство overflow было auto или scroll.
  2. Высота контейнера: Если высота контейнера меньше содержимого, Waypoints правильно определяет пересечение элементов.
  3. Позиционирование элементов: Элементы внутри контейнера должны быть позиционированы относительно нормального потока (не position: fixed), иначе вычисления могут быть некорректными.
  4. Изменение DOM: Если элементы внутри контейнера динамически добавляются или удаляются, требуется вызвать Waypoint.refreshAll() для пересчета.

Отслеживание направления прокрутки

Waypoints автоматически передает в функцию handler направление прокрутки относительно контейнера:

  • down — элемент появляется в зоне видимости при прокрутке вниз контейнера.
  • up — элемент появляется при прокрутке вверх контейнера.
var waypoint = new Waypoint({
  element: document.querySelector('.target-element'),
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Элемент вошел при прокрутке вниз');
    } else {
      console.log('Элемент вошел при прокрутке вверх');
    }
  },
  context: document.querySelector('.scrollable-container')
});

Практические рекомендации

  • Для длинных списков внутри прокручиваемого контейнера можно создавать Waypoint на каждом значимом элементе.
  • Использовать offset для кастомных контейнеров, если нужен визуальный эффект триггера не у верхней границы.
  • Всегда вызывать Waypoint.refreshAll() после динамических изменений в контейнере.
  • Учитывать padding и border контейнера при расчете позиции элементов.

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

Оглавление