Demo: https://codesandbox.io/s/agitated-euler-rep54
Click on any "click me to set ref". The popper correctly positions itself. Now start scrolling, and you'll see the popper doesn't stick to the ref.
If you move .popper
to be a direct child of .scroll-body
, it works.
<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>
What popper option do I need to set to make it work?
You should avoid changing the reference after the instance has been created like
state.elements.reference = newReference
and instead create a fresh popper instance entirely. The reason is thescrollParents
detection is done when the instance is created (or updated).https://codesandbox.io/s/nifty-night-5vjfm
You can change the reference dynamically if you call
.setOptions({})
after setting it though, but I would recommend the above instead.