检查元素是否完全可见

Question

我知道jQuery中的:visible，但是当元素的一部分不可见时（例如，当子元素大于其父元素时），它会返回true。

Answer 1

如果要检查整个元素是可见的，我能想到的唯一方法是进行计算。

检查CX> = PX 和（CX + c.width）< =（PX + p.width） 等。

如果这将是一个手机游戏，这可能是一个非常computationaly沉重的路要走。

请记住，如果我问为什么大于父母是一个问题？

Answer 2

像这样的东西应该取决于完全可见的defenition做的伎俩 - 注意我没有测试过这...在可见的定义不被隐而不溢出滚动父

var isCompletelyVisible = function($ele) { 
    $ele = $($ele); 
    var smaller = true; 
    $ele.each(function() { 
     var par = this.parentElement; 
     if(par.offsetWidth < this.scrollWidth || 
      par.offsetHeight < this.scrollHeight) {//larger than parent element 
     return (smaller = false); 
     } 
    }); 
    return smaller && $ele.is(":visible"); 
} 

任选地添加到jQuery的原型：

$.fn.isCompletelyVisible = isCompletelyVisible;

或者用于选择$(":fullvisible")（校正）

$.expr.filters.fullvisible = isCompletelyVisible;