javascript - Popper 不粘在滚动上的 ref 元素上

Question

演示:https://codesandbox.io/s/agitated-euler-rep54

单击任何“单击我设置引用”。弹出器正确定位。现在开始滚动，您会看到弹出器没有粘在引用上。

如果将 .popper 移动为 .scroll-body 的直接子级，它就可以工作。

<div id="app">
    <div class="scroll-body">
      <div v-for="n in 40">
          <span @click="setRef" class="ref">
            click me to set ref
          </span>
      </div>
    </div>
    <div ref="popper" class="popper">popper</div>
</div>

我需要设置什么弹出选项才能使其工作？

Answer 1

您应该避免在创建实例后更改引用，例如 state.elements.reference = newReference ，而是完全创建一个新的 popper 实例。原因是 scrollParents 检测是在创建(或更新)实例时完成的。

https://codesandbox.io/s/nifty-night-5vjfm

如果您在设置后调用.setOptions({})，则可以动态更改引用，但我建议您使用上面的方法。