Переполнение скрытого выбора 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'
});

См. ДЕМО: http://jsfiddle.net/qnuxs/3/

Каждые пять секунд он делает видимые абзацы красными.Он ждет 5 секунд, чтобы вы могли прокрутить и увидеть, что оставшиеся абзацы не были красными.

Другая демонстрация: http://jsfiddle.net/qnuxs/4/

Эта версия обновляет цвета во время прокрутки.

Обратите внимание, что расчеты кажутся неверными, поэтому он отключен на несколько пикселей, но этого должно быть достаточно, чтобы начать работу.Возможно, вам нужно использовать .innerHeight () для div или, возможно, изменить что-то еще, но это идея: получить позицию прокрутки и высоту div для вычисления верхней и нижней части видимой части и сравнить эти значения с верхними и нижними координатами (относительноdiv) каждого абзаца, и сделайте так, чтобы ваш фильтр выбирал только те, которые находятся в правильном диапазоне.

Answer 2

Вот суть этого:

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

Редактировать: я собирался конкретизировать это, но rsp побил меня тоже.