Какое событие слушать, чтобы адекватно обновлять позицию дропдауна?

Question

[Андрей]

Тег Vue, т.к. кейс на нём и используется одна из его возможностей - Teleport, позволяющая выносить блоки из общего потока.

Сам кейс заключается в том, что Телепорт используется для дропдаунов (всплывающих окошек, селектов, тултипов и прочее). В случае, когда такой селект расположен в самом документе, то достаточно слушать событие scroll и обновлять позицию дропдауна.

Но есть случаи, когда он расположен в других блоках с прокруткой, и тогда событие scroll отрабатывает уже не на windows, а на родительском блоке.

В качестве костыля мысли такие: пройтись по родительским блокам, найти те, у которых есть прокрутка, повесить слушатель события scroll (или вообще всем родительским). Не уверен на счёт адекватности подобного метода, учитывая, что координаты для всплывающего окошка рассчитываются через getClientBoundingRect().

Текущие плагины всплывающих окон (v-popover и прочие) не подходят, поэтому приходится пилить своё решение. Возможно, есть какая-то общая практика написания подобных вещей, буду благодарен за наводку.

У v-popover, кстати, нет никаких проблем с прокруткой вне зависимости от вложенности, поэтому поковыряю исходники, но буду признателен за любые мысли и советы. :)

Answer 1

[Арсений Матыцин]

Нус, для начала, можно не вытаскивать такие контекстные штуки в общую видимость. Если не злоупотреблять overflow-ами, то все будет ок.

В текущем же ключе для каждого элемента можно вешать слушатель прямо на вьюпорт, а не искать родителя.

Comments

[Андрей]

Проблема именно в overflow - когда помещаешь селект в какую-нибудь модалку, тут без телепорта не обойтись, к сожалению. Поэтому проще работать сразу с универсальным решением и телепортить всё по дефолту.

Если под вьюпортом вы подразумеваете window, то сейчас реализация именно такая (window.addEventListener('scroll', function)). И это не работает для случаев, когда элемент расположен внутри других блоков с прокруткой.

Если же вы имели ввиду что-то другое, то прошу уточнить)

[Арсений Матыцин]

Лучше всего использовать нативные селекты так-то, или имитировать их поведение, например не делать их больше окна, ведь об этом идет речь в примере с модалкой?

Суть со скроллом понял, пока мысли идут в сторону всплытия и перехвата.

К слову, в случаях, когда нужен элемент с прокруткой и при этом, чтобы элемент показывался без обрезки, я обычно использую дополнительную обертку над компонентом, которая отвечает за позиционирование, в то время, как то, что вызывает элемент, находится прямо с прокручиваемой области.