Question

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

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

所以从我提供的jsfiddle例子中，选择器应该给我前两个<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也打败了我。

溢出隐藏的jQuery选择器

2 个答案: