溢出隐藏的 jQuery 选择器

Question

我在<div> 中有几个<p> 元素。 <div> 有 overflow-y:auto; 隐藏了一些 <p> 元素，除非你向下滚动。 见http://jsfiddle.net/qnuxs/1/

我如何编写一个只选择<p> 元素的 jQuery 选择器，这些元素是完全（非部分）可见且不会因溢出而从视图中隐藏的。

因此，从 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'
});

查看演示：http://jsfiddle.net/qnuxs/3/

每五秒钟它就会使可见段落变红。它会等待 5 秒，这样您就可以滚动并看到剩余的段落不是红色的。

另一个演示：http://jsfiddle.net/qnuxs/4/

此版本会在您滚动时更新颜色。

请注意，计算似乎不正确，所以它偏离了几个像素，但应该足以让您开始。您可能需要为 div 使用 .innerHeight() 或者更改其他内容，但这就是想法：获取滚动位置和 div 高度以计算可见部分的顶部和底部，并将这些值与顶部和底部坐标（相对到每个段落的 div)，并让您的过滤器仅选择正确范围内的那些。

Answer 2

这是它的核心：

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

编辑：我本来打算更充实，但 rsp 也打败了我。