popper.js 常见问题(faq)——迹忆客-ag捕鱼王app官网

为什么我的popper在错误的位置(或根本不可见)?

对于 left 和 top 位置，popper依赖于 computestyles 修饰符的自适应选项的 html 标准模式。当 是popper元素的 offsetparent，并且它比视口高时，在“怪癖”模式下会出现问题。、

要修复它，请使用标准模式文档类型:

此外，确保你的弹出窗口元素(工具提示、弹出窗口等)。css不包括一些定位样式(如top, left, right, bottom, and transform)，因为它们可能会干扰popper定位逻辑。

为什么 poper 在滚动时会抖动？

如果你的参考元素是 position: fixed，使用 “fixed” 策略:

createpopper(reference, popper, {
  strategy: 'fixed',
});

由于浏览器处理元素更新的方式，如果策略与引用元素的位置不匹配，可能会出现一些不可避免的停顿。

在不禁用自使用的情况下，如何添加css过渡？

我们建议将popper元素作为内部元素的包装器，它可以有任何css属性转换:

  

    content
  

在上面的例子中，.popper元素是被定位但没有应用样式的元素。box 元素拥有所有的css样式和动画。

如何设置修饰符的默认值，并允许它们被覆盖?

修饰符按名称合并，数组中后面的项将覆盖前面的项。这提供了一种方法来配置一些默认的修饰符，但允许它们很容易被覆盖:

// 用户传入对象
const popperoptions = {
  strategy: 'fixed',
  modifiers: [
    {
      name: 'preventoverflow',
      options: {
        padding: 0,
      },
    },
  ],
};
// 你的库会设置自己的默认值:
createpopper(reference, popper, {
  ...popperoptions,
  modifiers: [
    {
      name: 'preventoverflow',
      options: {
        rootboundary: 'document',
        padding: 10,
      },
    },
    ...(popperoptions.modifiers || []),
  ],
});

如何改变基于浏览器宽度(媒体查询)的偏移量?

popper 不接受边距，但你仍然可以根据媒体查询来动态调整偏移量。

matchmedia()是一个很有用的 api -因为 offset 可以接受一个函数，它允许你根据一个条件动态改变 offset:

const mediaquery = window.matchmedia('(max-width: 500px)');
createpopper(reference, popper, {
  modifiers: [
    {
      name: 'offset',
      options: {
        // 0px distance at <= 500px width, otherwise 10px distance
        offset: () => [0, mediaquery.matches ? 0 : 10],
      },
    },
  ],
});

我的 popper 比 viewport 大，我该怎么做?

这里有一些选择:

• 防止 popper 的宽度从未超过浏览器的宽度与 max-width: 100vw; css (以及box-sizing: border-box)。
• 如果必须大于视口,设置 prevtoverflow 的 rootboundary 选项来记录。
• 创建一个自定义大小修饰符，根据剩余的可用空间改变弹出窗口的大小，并允许弹出窗口框滚动。detectoverflow实用程序可以实现这一点。