如何知道一个元素是否在屏幕上完成显示（完成渲染） - Javascript

Question

Let's see if someone comes up with something. I have the following problem:

I need to know, with javascript or jquery, when an element has finished displaying on the screen.

It is a table that is displayed on the screen as a modal popup window. It has a main container div with the size of the entire viwport, with a z-index of 10000 and display flex so that the div that acts as a popup window is centered. What I need to know is the clientWidth and offsetWidth properties of the body of the table to determine the width of the scroll bar which is equal to offsetWidth - clientWidth, and apply this width to the right margin of another div.

When the table is finished filling in a javascript function, the d-flex class is added to the main container so that the popup modal window is displayed.

The problem is that until the popup is not physically seen on the screen it gives me that both properties are the same, that is, there is no scroll bar visible. Only when popup appears on the screen is that they are different because there is a scroll bar. The scroll bar only appears when the popup has been physically displayed on the screen.

If I ask for any visibility properties they tell me that everything is visible but it hasn't really been shown on the screen yet.

I've even tried with a jQuery extension of the show function, but it doesn't give me the results I need either.

Thank you very much for your collaboration.

Greetings

Answer 1

You could do a work around IF you never desire the two property values to be the same. You could implement a setInterval to keep checking the property values:

let x = setInterval(function(){
    if (propertyValue1 !== propertyValue2){
      clearInterval(x);
      //do or trigger any code that you need to here
    }
},100)