Popper.js 防止溢出（Prevent Overflow）

preventtoverflow修饰符通过移动popper来防止popper被切断，使其在其边界区域内保持可见。

演示

tooltips被阻止溢出其剪切容器，即使它不再居中，示意图如下：

阶段（Phase）

main

Options

type Options = {
  mainAxis: boolean, // true
  altAxis: boolean, // false
  padding: Padding, // 0
  boundary: Boundary, // "clippingParents"
  altBoundary: boolean, // false
  rootBoundary: RootBoundary, // "viewport"
  tether: boolean, // true
  tetherOffset: TetherOffset, // 0
};

// Below are the described relative types
type TetherOffset =
  | (({
      popper: Rect,
      reference: Rect,
      placement: Placement,
    }) => number)
  | number;

mainAxis

对于顶部和底部放置，这是x轴。对于左右放置，它是y轴。默认情况下，仅此轴处于选中状态，这意味着如果底部放置的提升器在其边界区域的右侧溢出，它将向左移动，以便不会被切断。可以通过将其设置为false来禁用此行为。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        mainAxis: false, // true by default
      },
    },
  ],
});

altAxis

可选地，可以启用替代轴检查。请记住，这可能会导致提升阀与其参考元件重叠。通常，翻转修改器用于防止发生这种情况。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        altAxis: true, // false by default
      },
    },
  ],
});

padding

有关详细信息，请参阅检测溢出中的 padding 。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        padding: 8,
      },
    },
  ],
});

boundary

有关详细信息，请参见检测溢出中的 boundary。

const element = document.querySelector('#parentElement');

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        boundary: element,
      },
    },
  ],
});

altBoundary

这将检查引用的边界上下文 (clippingParents) 而不是 popper，有效地复制了 Popper v1 中的 scrollParent 边界。 有关详细信息，请参阅检测溢出中的 altBoundary。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        altBoundary: true, // false by default
      },
    },
  ],
});

rootBoundary

详细信息请参见检测溢出中的 rootBoundary。

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        rootBoundary: 'document',
      },
    },
  ],
});

tether

在试图保持popper元素在其溢出区域通常是所期望的,我们可能不希望达到的参考和popper元素并不互相紧邻(或“系”),因为这会让用户很难理解popper源自哪里。默认行为是通过允许popper元素在参考元素和popper元素的相对边缘对齐时溢出来避免这种情况(即在它们看起来被分离之前)。该行为可以通过将其设置为false来禁用:

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        tether: false, // true by default
      },
    },
  ],
});

tetherOffset

当tether被启用时，您可以通过提供在tether计算期间使用的偏移量来定制其行为。将偏移量设置为正数将使tether行为更早被激活，而将其设置为负数则相反。

tetherOffset选项也可以接受一个函数，这将使你能够读取一些有用的数据，如popper和引用度量，或当前popper位置:

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        tetherOffset: ({ popper, reference, placement }) => popper.width / 2,
      },
    },
  ],
});

Data

// Describes how much the Popper has been moved from its desired position so
// that it doesn't overflow
type Data = {
  x: number,
  y: number,
};