时间戳

首页 > 解决方案 > 如何知道元素是否已在屏幕上完成显示（完成渲染） - Javascript

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

问题描述

让我们看看是否有人提出了什么。我有以下问题：

我需要使用 javascript 或 jquery 知道元素何时在屏幕上完成显示。

它是一个在屏幕上显示为模式弹出窗口的表格。它有一个主容器 div，其大小与整个 viwport 一样，z-index 为 10000，并显示 flex，以便充当弹出窗口的 div 居中。我需要知道的是表格主体的clientWidth和offsetWidth属性，以确定滚动条的宽度等于offsetWidth - clientWidth，并将此宽度应用于另一个div的右边距。

当表格完成一个javascript函数的填充后，d-flex类被添加到主容器中，以便显示弹出模式窗口。

问题是，直到在屏幕上没有实际看到弹出窗口，它给我的两个属性是相同的，也就是说，没有可见的滚动条。只有当屏幕上出现弹出窗口时，它们才不同，因为有滚动条。仅当弹出窗口已物理显示在屏幕上时，才会出现滚动条。

如果我询问任何可见性属性，他们会告诉我一切都是可见的，但还没有真正显示在屏幕上。

我什至尝试过使用 show 函数的 jQuery 扩展，但它也没有给我需要的结果。

非常感谢您的合作。

问候

标签： javascriptrendering

解决方案

如果您从不希望两个属性值相同，则可以解决此问题。您可以实现 setInterval 以继续检查属性值：

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

推荐阅读