Получение данных о переполнении

Popper.js предоставляет мощный API для управления позиционированием всплывающих элементов относительно целевых элементов. Одним из ключевых аспектов динамического позиционирования является контроль переполнения (overflow), когда поппер может выходить за границы контейнера или видимой области окна. Для эффективной работы с переполнением используется модификатор preventOverflow и вспомогательные утилиты.

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

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

  • mainAxis — включает контроль по основной оси (по направлению placement).

  • altAxis — включает контроль по альтернативной оси (перпендикулярной placement).

  • boundary — элемент или область, относительно которой проверяется переполнение. Может быть:

    • DOM-элементом,
    • 'clippingParents' — ближайшие родительские элементы с обрезкой,
    • 'viewport' — границы видимой области окна.

  • padding — отступ от границ, учитываемый при расчете.

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

import { createPopper } from '@popperjs/core';

const reference = document.querySelector('#button');
const popper = document.querySelector('#tooltip');

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        boundary: 'viewport',
        padding: 8,
        mainAxis: true,
        altAxis: true,
      },
    },
  ],
});

В этом примере поппер будет корректироваться так, чтобы полностью оставаться в пределах окна браузера с отступом в 8px.

Получение информации о переполнении через popperState

Popper.js формирует объект состояния state, который передается всем модификаторам. В этом объекте есть поле modifiersData, где содержатся данные о результатах работы модификаторов. Для preventOverflow структура следующая:

state.modifiersData.preventOverflow = {
  x: <смещение по оси X>,
  y: <смещение по оси Y>,
  reset: boolean // true, если положение было сброшено
}

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

Пример модификатора для чтения переполнения:

{
  name: 'logOverflow',
  enabled: true,
  phase: 'afterMain',
  fn({ state }) {
    const overflowData = state.modifiersData.preventOverflow;
    console.log('Смещение по X:', overflowData.x);
    console.log('Смещение по Y:', overflowData.y);
  }
}

Этот модификатор выполняется после основной корректировки позиции и позволяет получить точные данные о том, на сколько пикселей поппер выходит за пределы зоны видимости.

Встроенная функция detectOverflow

Popper.js предоставляет утилиту detectOverflow, которая позволяет получить подробные данные о переполнении без модификации позиции. Она возвращает объект с четырьмя направлениями:

  • top
  • bottom
  • left
  • right

Каждое значение показывает, сколько пикселей элемент выходит за границы. Пример:

import { createPopper, detectOverflow } from '@popperjs/core';

const popperInstance = createPopper(reference, popper);

const overflow = detectOverflow(popperInstance.state, {
  boundary: document.body,
  padding: 10,
});

console.log('Переполнение сверху:', overflow.top);
console.log('Переполнение снизу:', overflow.bottom);
console.log('Переполнение слева:', overflow.left);
console.log('Переполнение справа:', overflow.right);

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

Настройка границ и отступов

Для точного контроля переполнения можно комбинировать boundary и padding. Примеры возможных значений boundary:

  • 'clippingParents' — выбирает ближайшие обрезающие элементы, что полезно для сложных DOM-структур.
  • HTMLElement — конкретный элемент контейнера.
  • 'viewport' — границы окна.
  • 'document' — границы всего документа.

Отступ padding предотвращает прилипание поппера к краям:

modifiers: [
  {
    name: 'preventOverflow',
    options: {
      boundary: document.querySelector('#container'),
      padding: 12
    }
  }
]

Практическое применение данных о переполнении

  1. Адаптивное размещение: при переполнении можно динамически менять placement на противоположное (top ↔︎ bottom, left ↔︎ right).
  2. Анимации и смещения: использовать значения x и y для плавной корректировки позиции с CSS-трансформациями.
  3. Интерактивные подсказки: при ограниченном пространстве можно сокращать содержимое или менять размеры всплывающего элемента.
  4. Логирование и аналитика UI: отслеживать, как часто элементы выходят за границы, что полезно для тестирования и улучшения интерфейса.

Итоговая структура работы с переполнением

  1. Определить границы через boundary.
  2. Настроить отступ через padding.
  3. Использовать preventOverflow для автоматического предотвращения выхода.
  4. Получать данные через state.modifiersData.preventOverflow или detectOverflow.
  5. Реализовывать дополнительную логику позиционирования при необходимости.

Использование этих инструментов обеспечивает точное и динамическое позиционирование, предотвращает визуальные ошибки и улучшает UX, особенно в интерфейсах с ограниченным пространством или сложной структурой DOM.

Оглавление