如何使用 PopperJS 确定平移 Y 定位答案

【问题标题】：How to determine Translate Y positioning with PopperJS如何使用 PopperJS 确定平移 Y 定位
【发布时间】：2021-02-10 15:27:51
【问题描述】：

我正在创建一个下拉控件作为可重用的 Web 组件，我决定使用 PopperJS 来处理下拉项的定位。

我正在尝试子项目，我创建了一个小检查以确定placement：

placement: this.parentElement.nodeName == "MY-ELEMENT" // Check if parent is a menu
  ? "right"
  : "bottom"

我有created a StackBlitz。

子项目向右打开没问题，但如果你F12 并检查项目，它们将被平移 -60px，因此项目位于中心而不是位于底部向下。

如果我选择放置right-end，那么这些项目的位置太低了，我想要的是翻译 Y 是 0 而不是 -60。

如何确定项目应正确定位？

【问题讨论】：

标签： javascript position popper.js

【解决方案1】：

StackBlitz 是否正常工作？

我认为你可以使用偏移修饰符来添加一些打滑：

createPopper(reference, popper, {
  placement: this.parentElement.nodeName == "MY-ELEMENT"
            ? "right"
            : "bottom",
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: ({ placement, reference, popper }) => {
          if (placement === 'right') {
            return [60, 0];
          } else {
            return [];
          }
        },
      },
    },
  ],
});

可能是60 而不是-60，不确定我是否得到了你想要的。你可以在这里查看用法：https://popper.js.org/docs/v2/modifiers/offset/

【讨论】：