Scrollable Div, какие элементы можно увидеть - PullRequest
Новая
       7

Scrollable Div, какие элементы можно увидеть

5 голосов
/ 06 июля 2011

У нас есть прокручиваемый div с CSS hieght:40px;.Внутри него несколько LI height:20px

    <div id="#scroller">
<li title="I1">item1</li>
<li title="I2">item2</li>
<li title="I3">item3</li>
<li title="I4">item4</li>
<li title="I5">item5</li>
<li title="I6">item6</li>
<li title="I7">item7</li>
<li title="I8">item8</li>
<li title="I9">item9</li>
    </div>

Когда пользователь прокручивает, я хочу запустить скрипт, который определяет первый из двух видимых элементов.Прокрутка div предназначена для привязки к элементам.Так что, если вы прокрутите вниз, и элемент 3 и элемент 4 будут видны, как мне найти, что элемент 3 является наиболее заметным элементом.все видимы, просто спрятаны за их контейнером.

Любые идеи,

Чудесные

Ответы [ 4 ]

11 голосов
/ 06 июля 2011

Обновление

Обновлено с рабочим примером http://jsfiddle.net/U4qyp/32/

Я думаю .position() должен сделать эту работу. Это дает вам позицию элемента относительно его родительского элемента. После того, как вы вызвали .position (), вы можете получить доступ к координатам элемента, используя свойства top и left.

http://api.jquery.com/position/

Элемент, верхняя позиция которого плюс его высота больше нуля, является видимым.

Вот пример того, что я имею в виду.

http://jsfiddle.net/U4qyp/10/

0 голосов
/ 06 июля 2011

Примерно так будет работать, когда вы замените файл console.log логикой отображения. 

<script>
    $(function() {
        $('#scroller').scroll(function() {
            $('#scroller li').each(function() {
                if ($(this).position().top > 0) {
                    console.log($(this).html());
                    return false;  // break once the first displayable value has been returned.
                }   
            })
        })
    })
</script>
0 голосов
/ 06 июля 2011

Метод jQuery position получает позицию относительно контейнера, и вы можете получить верхнюю позицию, выполнив $("li").position().top;

. Поэтому я решил написать цикл для прохождения всех элементов и найтиодин с наименьшим значением для position().top и выберите его.Вот сценарий, который я написал: 

$(function() {

    var mostVisibleItem = $("li:first");

    var smallestOffset = mostVisibleItem.position().top;
    $("li").each(function(i, item) {
        if($(item).position().top < smallestOffset)
        {
            smallestOffset = $(item).position().top;
            mostVisibleItem = $(item);
        }
    });
    mostVisibleItem.css("color", "red");
});

Вы можете увидеть, как это работает в JSFiddle здесь: http://jsfiddle.net/P69y2/

Надеюсь, это поможет:)

0 голосов
/ 06 июля 2011

Я бы подумал, что лучший способ сделать это - в вашем событии прокрутки захватить значение scrollTop элемента div и сравнить его с вершиной каждого элемента li (возможно, добавьте высоту, чтобы вы могли видеть, является ли элемент полностью вне поля зрения).

...