jquery - 计算容器中溢出的元素

Question

假设我有以下标记（下面提供了 jsfiddle）

 <div class="masterContainer"> 
        <div class="filterContainerStrip"> 
            <div class="filterButton">Filter 001</div>
            <div class="filterButton">Filter 002</div>
             ...
        </div>
        <div class="hiddenFilterCount"> ... 4 filters hidden </div>
 </div>

其中可能有任何可变数量的filterButtons ，filterContainerStrip但溢出被下拉并且通过容器上的设置、和filterButtons不再可见。max-widthheightoverflow-y: hidden

我想知道filterButtons当前隐藏了多少，以便将其显示给用户。

这是小提琴 jsfiddle

更新的小提琴

谢谢

Answer 1

如果顶部位置（相对于父级）+ 高度高于父级的高度，或者左侧位置 + 宽度高于父级的宽度，则假定元素不可见：

$(window).on('resize', function(){
    var hidden = $('.filterButton').filter(function(){  
      return (this.offsetTop + this.offsetHeight > this.parentNode.clientHeight)
          || (this.offsetLeft + this.offsetWidth > this.parentNode.clientWidth);
    });    

   $('.hiddenFilterCount').text('... ' + hidden.length + ' filters hidden');    
});    

演示

Answer 2

这应该有效：

var $cont= $('.filterContainerStrip'), contH=$cont.height();

var hiddenEls= $cont.children().filter(function(){
    return $(this).position().top >= contH;
}).length;

$('.hiddenFilterCount').text( hiddenEls+' filters hidden');

演示：http: //jsfiddle.net/FbXep/3/