Автоматический выбор позиции

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

Автоматический выбор позиции реализован через стратегию flip и алгоритм preventOverflow. Эти модификаторы анализируют ограничения контейнера, размеры поппера и размеры viewport, чтобы корректно разместить элемент без обрезки или выхода за пределы видимой области.

Модификатор flip

Модификатор flip позволяет попперу менять своё положение в зависимости от доступного пространства. Основная идея: если поппер не помещается в выбранной позиции, библиотека ищет альтернативную, согласно массиву fallbackPlacements.

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

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'top',
  modifiers: [
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['right', 'bottom', 'left'],
        padding: 8, // минимальное расстояние до границ viewport
      },
    },
  ],
});

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

  • placement — начальная позиция, которую Popper пытается использовать.
  • fallbackPlacements — массив альтернативных позиций при нехватке места.
  • padding — задаёт минимальное расстояние до границ экрана, предотвращая наложение поппера на края.

Модификатор flip работает на основе виртуального измерения доступного пространства. Если выбранная позиция не помещается, Popper проверяет каждую fallback-позицию по очереди, пока не найдёт подходящую. Если подходящей нет, возвращается позиция с наименьшим перекрытием или обрезкой.

Модификатор preventOverflow

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

Настройка модификатора:

modifiers: [
  {
    name: 'preventOverflow',
    options: {
      boundary: 'viewport', // границы, относительно которых осуществляется проверка
      padding: 8,           // отступ от границ
      tether: true,         // позволяет привязать поппер к reference, смещая при необходимости
    },
  },
]

Основные параметры:

  • boundary — контейнер, внутри которого ограничивается позиционирование (viewport, scrollParent, window, или DOM-элемент).
  • padding — минимальное расстояние от границ контейнера.
  • tether — включение «привязки» поппера к reference. Без этого поппер может частично выйти за границы.

Порядок работы автоматического позиционирования

  1. Popper измеряет размеры reference и popper.
  2. Проверяет доступное пространство в направлении, указанном в placement.
  3. Если места недостаточно, активируется flip — выбирается альтернативная позиция из fallbackPlacements.
  4. После выбора позиции preventOverflow корректирует смещение, чтобы поппер полностью помещался в границах контейнера.
  5. Применяются дополнительные модификаторы, такие как offset, для точной настройки позиции.

Комбинирование с offset

Для тонкой настройки позиции рекомендуется использовать модификатор offset вместе с автоматическим выбором позиции. Он позволяет задавать смещение в пикселях или процентах.

Пример:

modifiers: [
  {
    name: 'offset',
    options: {
      offset: [0, 10], // 0 по основной оси, 10px по перекрестной
    },
  },
  {
    name: 'flip',
    options: { fallbackPlacements: ['right', 'bottom'] },
  },
  {
    name: 'preventOverflow',
    options: { padding: 5 },
  },
]

Комбинация этих модификаторов позволяет динамически изменять позицию поппера, сохраняя визуальную целостность и предотвращая перекрытия.

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

  • Для сложных интерфейсов с динамическим контентом рекомендуется использовать flip с широким списком fallback-позиций.
  • preventOverflow необходим для popper-элементов, которые могут выходить за границы viewport или контейнера с прокруткой.
  • Значение padding стоит подбирать с учётом дизайна интерфейса, чтобы поппер не прилипал к краям.
  • При использовании анимаций позиция поппера должна обновляться через метод update экземпляра Popper, чтобы автоматическое позиционирование корректно пересчитало доступное пространство.

Итоговое взаимодействие модификаторов

Автоматический выбор позиции Popper.js — это результат взаимодействия нескольких модификаторов:

  • flip — определяет оптимальную сторону для отображения.
  • preventOverflow — удерживает элемент внутри видимой области.
  • offset — обеспечивает визуально комфортное расстояние от reference.

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

Оглавление