Тип boundary: clippingParents

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

Суть clippingParents

Значение clippingParents указывает Popper.js использовать все родительские элементы с обрезкой (clipping) как границы, за которые поппер не должен выходить.

Clipping-родители — это элементы, которые ограничивают видимую область потомка с помощью CSS-свойств вроде:

  • overflow: hidden;
  • overflow: scroll;
  • overflow: auto;

Popper.js автоматически определяет эти элементы в DOM-дереве и рассчитывает доступное пространство для отображения поппера.

Отличие от других значений boundary

Значение boundary Описание
viewport Ограничение только видимой областью окна браузера
window Ограничение всей областью окна, включая скролл
clippingParents Ограничение всеми родительскими элементами с обрезкой
HTMLElement Ограничение конкретным DOM-элементом

clippingParents выгодно использовать в сложной структуре DOM, когда элементы могут быть вложены в контейнеры с ограниченной видимостью. Это гарантирует, что поппер не выйдет за пределы видимой области родителя.

Как Popper.js определяет clippingParents

  1. Popper.js поднимается по DOM-дереву от элемента-поппера к корню документа.

  2. Проверяются все элементы на наличие CSS-свойств, влияющих на обрезку:

    • overflow (значения hidden, scroll, auto)
    • contain: layout или contain: paint в некоторых случаях

  3. Элементы с такими свойствами становятся clipping parents, и их размеры учитываются при расчёте позиции поппера.

Практическое использование

Пример создания поппера с параметром boundary: 'clippingParents':

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

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

createPopper(button, tooltip, {
  placement: 'top',
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        boundary: 'clippingParents'
      }
    }
  ]
});
  • placement: 'top' — поппер изначально появляется сверху кнопки.
  • modifiers с preventOverflow следят за тем, чтобы поппер не выходил за границы родительских элементов с обрезкой.
  • boundary: 'clippingParents' позволяет автоматически учитывать несколько родительских ограничителей, не указывая их вручную.

Важные нюансы

  1. Несколько clipping-родителей Если элемент находится внутри нескольких контейнеров с overflow: hidden, Popper.js определяет наименьшую доступную область, чтобы поппер оставался полностью видимым.

  2. Влияние transform и perspective Элементы с transform или perspective создают новые контексты, что может повлиять на расчёт размеров clipping-родителей. Popper.js учитывает такие контексты при вычислении границ.

  3. Производительность Для глубоких деревьев DOM определение всех clipping-родителей может быть затратным по ресурсам. Если известен конкретный контейнер, предпочтительнее использовать его напрямую вместо 'clippingParents'.

  4. Комбинация с flip boundary: 'clippingParents' особенно полезно вместе с модификатором flip. Popper.js автоматически изменит сторону отображения поппера, если текущая позиция выходит за границы доступной области.

Когда применять clippingParents

  • Вложенные интерфейсы с ограниченными контейнерами (modal, scrollable div, dropdown внутри overflow: hidden).
  • Сценарии, где поппер должен всегда оставаться видимым в пределах видимой области родителя, а не окна браузера.
  • Сложные веб-приложения с динамически изменяющимися размерами контейнеров.

Использование clippingParents делает поведение попперов более предсказуемым в сложной верстке, устраняя случаи, когда всплывающий элемент неожиданно обрезается или выходит за пределы видимой области.

Оглавление