Popper使用offset修饰器时弹出层超出视口，如何同时保证适配视口？

解决方案 #

你遇到的是Popper修饰器执行顺序配置不当导致的问题，无需二选一，可通过以下两种方案实现需求：

方案1：调整内置修饰器配置（推荐）

Popper默认的修饰器执行逻辑本身就支持先应用偏移再做视口适配，你只需要确保修饰器顺序正确、参数配置完整即可：

1. 保证offset修饰器的执行顺序在preventOverflow和flip之前
2. 开启preventOverflow的双轴溢出检测
3. 不要使用字符串格式的offset值，Popper v2+要求传入数字数组，单位默认px

配置示例：

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

const popperInstance = createPopper(触发元素, 弹出层元素, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, -30], // 对应你之前的0,-30px配置
      },
    },
    {
      name: 'preventOverflow',
      options: {
        padding: 8, // 弹出层距离视口边缘的最小安全距离，可自定义
        mainAxis: true, // 开启主轴线溢出修正
        altAxis: true, // 开启交叉轴线溢出修正
      },
    },
    {
      name: 'flip',
      options: {
        padding: 8,
      },
    },
  ],
});

该方案下如果偏移后弹出层超出视口，Popper会自动将弹出层回移到视口范围内，不会完全抵消offset偏移，仅修正溢出的部分。

方案2：自定义修饰器实现“偏移溢出时完全取消偏移”

如果你要求只有偏移后弹出层完全不溢出视口时才应用偏移，否则完全不偏移，可以自定义修饰器实现该逻辑：

// 自定义条件偏移修饰器
const conditionalOffsetModifier = {
  name: 'conditionalOffset',
  enabled: true,
  phase: 'main',
  requires: ['offset', 'preventOverflow'],
  fn({ state, options }) {
    const targetOffset = options.offset || [0, -30];
    // 计算偏移后的坐标
    const testX = state.x + targetOffset[0];
    const testY = state.y + targetOffset[1];
    const { width: popperW, height: popperH } = state.rects.popper;
    const viewportW = window.innerWidth;
    const viewportH = window.innerHeight;

    // 校验偏移后是否完全在视口内
    const isFullyInViewport = testX >= 0 
      && testX + popperW <= viewportW
      && testY >= 0
      && testY + popperH <= viewportH;

    // 仅符合条件时应用偏移
    if (isFullyInViewport) {
      state.x = testX;
      state.y = testY;
    }
  },
};

// 注册到Popper配置中
const popperInstance = createPopper(触发元素, 弹出层元素, {
  modifiers: [
    conditionalOffsetModifier,
    {
      name: 'preventOverflow',
      options: { padding: 8, altAxis: true }
    },
    { name: 'flip', options: { padding: 8 } }
  ]
});

额外提示 #

如果你使用的是基于Popper封装的上层组件（比如Ant Design、Element UI的Popover/Tooltip），可以通过组件暴露的popper-options属性直接传入上述配置，无需单独初始化Popper实例。

内容的提问来源于stack exchange，提问作者drake035