如果所有div在其他div中完全可见，我该如何检查？

Question

我有一个div，称为“包装器”，具有响应高度和溢出自动（因此启用滚动）。在这个div中有许多其他div，称为“盒子”。所以，例如，如果包装器中有3个div，我完全看到它们，那么什么都不应该发生。但是如果包装器中的任何div都不完全可见（在页面加载和页面调整大小），则另一个div（称为“按钮”）应该淡入。

我刚发现这篇文章，但它没有解决我的问题： stackoverflow post

HTML：

<div class="wrapper">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

<div class="button">
My Button
</div>

我的小提琴： HTML + CSS

如果其他div中的所有div 完全可见（在页面加载和页面调整大小上），我如何检查？

＃

更新 我的问题是，“viewport”对我来说不起作用，因为脚本还要检查视口外的内容（动态）。我的div的高度是响应的，所以不是每次都在视口中...

......但对我来说，我找到了另一种解决方案。现在我检查我的主div（我的主要内容）的高度，如果这个div小于“包装”div，我将淡入“按钮”div。

Answer 1

你可以试试这个我的朋友“

std::array

Answer 2

托管HTML时：

• 右键点击wrapper并检查元素
• 将鼠标悬停在div内的第一个wrapper内，并突出显示
• 检查页面上是否显示div
• 对div
中的每个wrapper继续执行上述步骤

Answer 3

这似乎解决了与您所描述的问题相同或非常相似的问题：

zeusdeux/isInViewport

＆＃34;示例＆＃34;文件夹包括各种示例，其中DIV对它们是否包含在已定义的视口div中作出反应。

编辑：在阅读有关问题的评论之后，这似乎是阅读一般问题和解决方案的最佳资源（即使isInViewport看起来非常有用）：

How to tell if a DOM element is visible in the current viewport?