Работа с overflow

В Floating UI управление переполнением (overflow) является ключевым аспектом при построении всплывающих элементов, таких как тултипы, поповеры и контекстные меню. Overflow возникает, когда плавающий элемент выходит за границы видимой области окна или родительского контейнера. Библиотека предоставляет мощные инструменты для контроля поведения таких элементов.

Опции overflow в Floating UI

Floating UI использует middleware shift и middleware flip для контроля переполнения. Эти middleware автоматически корректируют позицию элемента, чтобы он оставался видимым.

flip

Middleware flip позволяет элементу менять сторону расположения при недостатке места.

import { flip, offset, autoUpdate, computePosition } from '@floating-ui/dom';

computePosition(reference, floating, {
  middleware: [offset(10), flip()]
}).then(({ x, y, placement }) => {
  Object.assign(floating.style, {
    left: `${x}px`,
    top: `${y}px`
  });
});
  • placement – определяет начальную позицию (top, bottom, left, right).
  • flip автоматически выбирает альтернативное направление при переполнении.
  • Можно указать fallbackPlacements – массив альтернативных позиций.
flip({
  fallbackPlacements: ['right', 'left']
})

shift

Middleware shift смещает элемент, чтобы он полностью помещался в видимую область, не меняя основной стороны.

shift({
  padding: 8, // отступ от границ окна
})
  • Полезен, когда нужно оставить выбранную сторону, но предотвратить выход за границы.
  • padding определяет минимальное расстояние от границы контейнера или окна.

autoPlacement и управление переполнением

Иногда удобно позволить библиотеке автоматически выбирать оптимальную позицию с учётом переполнения. Для этого используется middleware autoPlacement:

import { autoPlacement } from '@floating-ui/dom';

computePosition(reference, floating, {
  middleware: [offset(5), autoPlacement()]
});
  • autoPlacement комбинирует поведение flip и shift.
  • Можно настроить предпочтительные позиции и padding через параметры:
autoPlacement({
  alignment: 'start', // 'start', 'end', 'center'
  padding: 10,
  allowedPlacements: ['top', 'bottom', 'right']
})

Работа с контейнерами с overflow: hidden

Если родительский элемент имеет CSS-свойство overflow: hidden или scroll, плавающий элемент может обрезаться. Floating UI предоставляет middleware detectOverflow, который позволяет получать информацию о реальном переполнении и корректировать позицию вручную:

import { detectOverflow } from '@floating-ui/dom';

const overflowData = await detectOverflow(floating, {
  padding: 5
});

if (overflowData.top > 0) {
  console.log('Элемент выходит за верхнюю границу');
}
  • Возвращает объект с расстояниями до границ контейнера: {top, bottom, left, right}.
  • Используется для динамического смещения или принятия нестандартных решений.

Комбинация middleware для комплексного управления

Для сложных интерфейсов рекомендуется комбинировать offset, flip, shift и detectOverflow:

computePosition(reference, floating, {
  middleware: [
    offset(10),
    flip({ fallbackPlacements: ['right', 'left'] }),
    shift({ padding: 5 })
  ]
});
  • Порядок middleware имеет значение: сначала задаются базовые смещения (offset), затем проверка на переполнение и возможный flip, и в конце финальное смещение (shift).

Настройка padding и ограничения

  • padding – минимальное расстояние до края окна или контейнера.
  • boundary – можно указать конкретный элемент для ограничения (document.body по умолчанию).
  • rootBoundary – определяет, относительно чего проверяется переполнение (viewport или document).
shift({
  padding: 8,
  boundary: document.getElementById('modal'),
  rootBoundary: 'viewport'
});

Использование strategy: 'fixed' для элементов вне потока

Элементы с position: fixed игнорируют родительские ограничения, что особенно полезно при переполнении внутри скроллируемых контейнеров:

Object.assign(floating.style, {
  position: 'fixed'
});
  • В сочетании с middleware shift и flip позволяет полностью контролировать положение даже при сложных layout.

Рекомендации по практическому использованию

  • Для большинства всплывающих элементов достаточно комбинации offset + flip + shift.
  • Использовать autoPlacement, если требуется полностью динамическая позиция.
  • Всегда проверять родительские контейнеры на overflow: hidden, чтобы избежать обрезки.
  • Middleware detectOverflow полезен для отладки и кастомного поведения при сложных ограничениях.

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

Оглавление