jQuery中的测试元素可见性

Question

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

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

有没有更简单的方法？

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) 
} 

见README了解更多信息。

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

希望这有助于增加额外的检查。