@AndrewRusinas

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

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

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

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

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

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

У v-popover, кстати, нет никаких проблем с прокруткой вне зависимости от вложенности, поэтому поковыряю исходники, но буду признателен за любые мысли и советы. :)
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Нус, для начала, можно не вытаскивать такие контекстные штуки в общую видимость. Если не злоупотреблять overflow-ами, то все будет ок.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы