在jQuery中测试元素可见性

Question

确定元素在页面上是否真正可见的最佳方法是什么？因为像素被更改，因为元素没有通过CSS隐藏而位于可滚动区域的可见部分（窗口或一些溢出的块元素）？

我想我需要先对元素及其父母检查.is（'：hidden'）。然后我需要遍历所有父项和窗口，检查溢出滚动/自动/隐藏，然后将该父元素的滚动位置和大小与原始元素的位置和大小进行比较。而且我还需要检查绝对定位并查看z索引。

有更简单的方法吗？

Answer 1

有一个插件。 jQuery inview event plugin

Answer 2

我已经实施了$.inside插件，您可以在其中指定ancestor：

$('html').css('height', '100%');   // make `html` the height of the viewport
$('#your-element').inside('html'); // compare `#your-element` to `html`

将返回例如：

{
  left: 0.2,  // your element is "x-inside" (because >0 and <1)
  top: -2.3   // but is not "y-inside" (because <0)
}

有关详细信息，请参阅自述文件。

在您的情况下，您可以在is(':hidden')和z-index

上添加其他检查

希望这有帮助。