波普爾不堅持滾動參考元素

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 。