Найти элементы DOM вверху и внизу прокрутки div с помощью jQuery - PullRequest
Новая
       15

Найти элементы DOM вверху и внизу прокрутки div с помощью jQuery

3 голосов
/ 18 августа 2011

У меня есть элемент прокрутки, содержащий элементы списка.У меня есть это стандартное событие прокрутки 

$("#scrollingDiv").scroll(function(e) {

});

Внутри этой функции события прокрутки, как я могу выяснить, какие элементы находятся сверху и снизу видимой в данный момент области?

1 Ответ

3 голосов
/ 18 августа 2011

Вы можете попробовать вычислить позиции элементов списка относительно прокрутки <div>, а затем отсканировать позиции, чтобы увидеть, какие из них совпадают с scrollTop из <div>.

Нечто подобное возможно: 

var base = $('#scrollingDiv').offset().top;
var offs = [ ];
$('li').each(function() {
    var $this = $(this);
    offs.push({
        offset: $this.offset().top - base,
        height: $this.height()
    });
});
$("#scrollingDiv").scroll(function() {
    var y = this.scrollTop;
    for(var i = 0; i < offs.length; ++i) {
        if(y < offs[i].offset
        || y > offs[i].offset + offs[i].height)
            continue;
        // Entry i is at the top so do things to it.
        return;
    }
});

Живая версия (откройте консоль, пожалуйста): http://jsfiddle.net/ambiguous/yHH7C/

Возможно, вы захотите поиграть с нечеткостью if, чтобы получить что-то, что работает разумно (видимый 1px едва ли делает элемент верхним), но основная идея должна быть достаточно ясной. Смешивание по высоте #scrollingDiv позволит увидеть, какая <li> находится внизу.

Если у вас много элементов списка, линейный поиск может оказаться не тем, что вам нужно, но вы сможете решить его без особых усилий.

...