波普尔不坚持滚动参考元素

Question

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

单击任何“单击我设置参考”。 popper 正确定位自己。 现在开始滚动，你会看到 popper 没有粘在 ref 上。

如果您将.popper移动为.scroll-body的直接子.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>

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

Answer 1

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

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

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

Answer 2

如果你把溢出-y：滚动； 在#app 上，它将以您想要的方式工作。 需要在父级上设置溢出-y 才能影响子级。

Answer 3

我遇到过这个问题，就我而言，我忘记设置 container overflow: auto 。