javascript - 如何检查所有 div 在另一个 div 中是否完全可见？

Question

我有一个名为“wrapper”的 div，具有响应高度和自动溢出功能(因此启用滚动)。这个 div 里面有很多其他的 div，称为“box”。因此，例如，如果包装器内有 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>

我的 fiddle : HTML + CSS

如何检查所有 div 在另一个 div 中是否完全可见(在页面加载和页面调整大小时)？

#

更新:我的问题是，“视口(viewport)”对我不起作用，因为脚本还必须检查视口(viewport)之外发生的情况(动态)。我的 div 的高度是响应式的，所以并不是每次都在视口(viewport)中......

...但对我来说，我找到了其他解决方案。现在我检查我的主 div(我的主要内容)的高度，如果这个 div 小于“wrapper”div，我将淡入“button”div。

Answer 1

你可以试试这个，我的 friend ”

 if ($(".wrapper div").css('visibility') === 'hidden') {
  // ...
   }