jquery - 溢出隐藏的 jQuery 选择器

Question

我有几个<p> <div> 内的元素。 <div>有overflow-y:auto;其中隐藏了一些<p>除非向下滚动，否则 View 中的元素。请参阅http://jsfiddle.net/qnuxs/1/

我如何编写一个只选择 <p> 的 jQuery 选择器完全(不是部分)可见且不会因溢出而从 View 中隐藏的元素。

因此，从我提供的 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)，并使过滤器仅选择正确范围内的内容。