溢出隐藏的jQuery选择器

Question

我有几个<p>元素<div>.该<div>有overflow-y:auto;其隐蔽了一些<p>,除非你向下滚动的视图元素.见http://jsfiddle.net/qnuxs/1/

我怎样才能编写一个jQuery选择器,它只选择<p>完全(不是部分)可见的元素,而不是从溢出的视图中隐藏.

所以从我提供的jsfiddle例子中,选择器应该给我前2 <p>'s(000和111),因为它们是完全可见的唯一标签.

注意:并非所有<p>必需的标签都具有相同的高度.高度可能会有所不同.

Answer 1

你可以这样做,例如使用你自己的.filter()函数:

var st = $('div').scrollTop(),
    sh = $('div').height(),
    sb = st + sh - 1;

$('p').css({
    background: '#ccc'
});
$('p').filter(function() {
    var $this = $(this),
        h = $this.height(),
        t = $this.position().top,
        b = t + h - 1;
    return (t >= st && b <= sb);
}).css({
    background: 'red'
});

见DEMO:http://jsfiddle.net/qnuxs/3/

每五秒钟,它会使可见的段落变红.它会等待5秒钟,因此您可以滚动并查看其余段落不是红色.

另一个DEMO:http://jsfiddle.net/qnuxs/4/

滚动时,此版本会更新颜色.

请注意,计算似乎是不正确的,因此关闭几个像素,但它应该足以让您开始.您可能需要使用.innerHeight()作为div或者可能更改其他内容,但这是一个想法:获取滚动位置和div高度以计算可见部分的顶部和底部,并将这些值与顶部和底部坐标进行比较(相对到每个段落的div),并使您的过滤器只选择正确范围内的那些.

Answer 2

这是它的核心:

http://jsfiddle.net/qnuxs/5/

编辑:我会更多地充实它,但是rsp也打败了它.