Popper 不粘在滚动条上的 ref 元素上
Popper not sticking to ref element on scroll
演示:https://codesandbox.io/s/agitated-euler-rep54
点击任意 "click me to set ref"。波普尔正确定位自己。现在开始滚动,你会看到弹出器没有粘在参考上。
如果您移动 .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>
我需要设置什么 popper 选项才能使其工作?
如果你放overflow-y: scroll;在#app 上,它将按照您想要的方式工作。需要在父级上设置溢出-y 才能影响子级。
您应该避免像 state.elements.reference = newReference
那样在创建实例后更改引用,而是完全创建一个新的 popper 实例。原因是 scrollParents
检测是在创建(或更新)实例时完成的。
https://codesandbox.io/s/nifty-night-5vjfm
如果在设置后调用 .setOptions({})
,您可以动态更改引用,但我建议改用上面的方法。
我遇到过这个问题,就我而言,我忘记设置容器 overflow: auto
。
演示:https://codesandbox.io/s/agitated-euler-rep54
点击任意 "click me to set ref"。波普尔正确定位自己。现在开始滚动,你会看到弹出器没有粘在参考上。
如果您移动 .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>
我需要设置什么 popper 选项才能使其工作?
如果你放overflow-y: scroll;在#app 上,它将按照您想要的方式工作。需要在父级上设置溢出-y 才能影响子级。
您应该避免像 state.elements.reference = newReference
那样在创建实例后更改引用,而是完全创建一个新的 popper 实例。原因是 scrollParents
检测是在创建(或更新)实例时完成的。
https://codesandbox.io/s/nifty-night-5vjfm
如果在设置后调用 .setOptions({})
,您可以动态更改引用,但我建议改用上面的方法。
我遇到过这个问题,就我而言,我忘记设置容器 overflow: auto
。