Which event to listen for to adequately update the dropdown position?

Question

css

The Vue tag, because case on it and one of its features is used - Teleport, which allows you to take blocks out of the general flow.

The case itself is that the Teleport is used for dropdowns (pop-up windows, selects, tooltips, etc.). In the case when such a select is located in the document itself, it is enough to listen to the scroll event and update the dropdown position.

But there are cases when it is located in other blocks with scrolling, and then the scroll event is no longer processed on windows, but on the parent block.

As a crutch, the thoughts are as follows: go through the parent blocks, find those that have scrolling, hang up a scroll event listener (or generally all parent blocks). I'm not sure about the adequacy of this method, given that the coordinates for the pop-up window are calculated via getClientBoundingRect ().

Current popup plugins (v-popover and others) are not suitable, so you have to cut your solution. Perhaps there is some general practice of writing such things, I will be grateful for the tip.

v-popover, by the way, has no problems with scrolling regardless of nesting, so I'll dig into the source, but I'll be grateful for any thoughts and advice. :)

Answer 1

Well, for starters, you can not pull out such contextual things in the general visibility. If you do not abuse overflows, then everything will be ok.
In the current key, for each element, you can hang a listener directly on the viewport, and not look for the parent.