教程 > Popper.js 中文教程 > Popper.js 入门 阅读：1544

Popper.js 常见问题(FAQ)

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

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

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

<!DOCTYPE html>
<html>
  <!-- ... -->
</html>

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

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

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

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

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

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

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

<div class="popper">
  <div class="box">
    Content
  </div>
</div>

在上面的例子中，.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实用程序可以实现这一点。

查看笔记

扫码一下
查看教程更方便