Popper.js detectOverflow

detectOverflow实用程序返回popper或引用元素相对于给定边界的溢出偏移量的对象。

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

const overflow = detectOverflow(state, options);

您可以在自己的自定义修饰符中使用此实用程序。

State

第一个参数是传递给修饰符的popper实例状态。

Options

type Options = {
  placement: Placement, // state.placement
  elementContext: Context, // "popper"
  boundary: Boundary, // "clippingParents"
  rootBoundary: RootBoundary, // "viewport"
  altBoundary: boolean, // false
  padding: Padding, // 0
};

// Below are the relative types
type Context = 'reference' | 'popper';
type Boundary = 'clippingParents' | HTMLElement | Array<HTMLElement>;
type RootBoundary = 'document' | 'viewport';
type Padding =
  | number
  | {|
      top?: number,
      right?: number,
      bottom?: number,
      left?: number,
    |};
        ```
        
## placement

这将检查溢出时，popper是给定的位置。默认情况下，它是 `state.placement`。

## elementContext

它描述被检查的相对于边界是否溢出的元素。

```javascript
detectOverflow(state, {
  elementContext: 'reference', // 'popper' by default
});

boundary

这描述了将检查元素是否相对于其溢出的区域。

默认情况下，它是“clippingParents”，这是滚动容器，可能导致元素部分或完全切断。

const customBoundary = document.querySelector('#boundary');

detectOverflow(state, {
  boundary: customBoundary, // 'clippingParents' by default
});

rootBoundary

这描述将检查是否溢出的根边界。只有两个“根”——视口和文档。viewport是默认的，它是用户在屏幕上实际可以看到的文档区域。“文档”是可以滚动的整个页面。

detectOverflow(state, {
  rootBoundary: 'document', // 'viewport' by default
});

altBoundary

这描述了是否使用alt元素的边界。例如，如果elementContext是“popper”，那么它将检查引用的边界上下文，反之亦然。

detectOverflow(state, {
  altBoundary: true, // false by default
});

padding

对边界应用虚拟填充。

您可以传递一个数字，它将是所有四个边的相等的填充，或一个对象，包含有各自的填充值的边属性。

detectOverflow(state, {
  // Same padding on all four sides
  padding: 8,
  // Different padding on certain sides – unspecified sides are 0
  padding: { top: 8, right: 16 },
});

返回值

//如果数字是正数，popper溢出像素的数量。
//当为0或负值时，popper在其边界内。
type OverflowOffsets = {
  top: number,
  bottom: number,
  right: number,
  left: number,
};

例子

对于你的自定义修饰符，确保你在requiresIfExists中添加了"offset"，因为如果offset存在于修饰符的生命周期中，util需要访问这个信息:

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

const myModifier = {
  name: 'myModifier',
  enabled: true,
  phase: 'main',
  requiresIfExists: ['offset'],
  fn({ state }) {
    const overflow = detectOverflow(state);
    // ...
  },
};

detectOverflow 默认情况下只考虑偏移量修饰符，并报告值，就好像当前没有其他修饰符影响它一样。这意味着如果 prevtoverflow 被启用，它的值应该被考虑在内 (state. modifiersdata . preventtoverflow) ，以及任何其他可能改变 popperoffset 的修饰符。