Поппер не придерживается элемента 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({}) после установки, но я бы порекомендовал вместо этого.

Answer 2

Если поставить overflow-y: scroll; в #app все будет работать так, как вы хотите. Необходимо установить Overflow-y для родительского элемента, чтобы он повлиял на дочерний элемент.

Answer 3

Я столкнулся с этой проблемой, в моем случае я забыл установить контейнер overflow: auto.