检查元素在屏幕上是否可见

Question

在复杂的Web应用程序中，我必须检查某些HTML元素是否在屏幕上部分/完全可见。

有多种原因导致某些元素在屏幕上不可见：

• 它们具有某些属性，例如display：none可见性：隐藏的width：0高度：0 opacity：0以及其他属性。
• 其他元素位于该元素的前面。
• 它们在父母的可见滚动区域之外。
• 在某种程度上，他们的某些父母具有上述一个或多个属性（具有绝对或固定位置的元素破坏了链）。
• 由于其他原因，它们位于父对象的可见区域之外，例如，父对象可能会被其他元素部分覆盖，并且仅覆盖该部分。

我在堆栈溢出中发现的内容（例如How to Check if element is visible after scrolling?，http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport等）正在基于上述一个或两个原因进行简单的检查，但几乎没有尝试检测所有我排队的原因。

在我现在开始手动执行所有操作之前，包括所有极端情况：是否可以通过javascript使用与原因无关的检查，这将为我提供有关元素是否在渲染结果中可见的反馈？

就目前而言，我能想到的最简单，最可靠的方法是（尚未测试）修改元素的background-color属性，在前后使用html2canvas库并检查是否结果图像匹配。

“解决方法”之外还有什么吗？

（更新：我已经测试了我的html2canvas方法，不仅速度很慢，而且还给出了误报，因为即使背景颜色改变的元素根本不可见，图像也不总是一样。）< / p>