Question

我们有一个具有CSS hieght:40px;的可滚动div。里面是多个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是最可见的元素。

我尝试了$('#scroller li:visible')但是这并不起作用，因为div只关注它们只是隐藏在容器后面。

任何想法，

非凡

Answer 1

更新

更新了工作示例http://jsfiddle.net/U4qyp/32/

我认为.position()应该完成这项工作。它为您提供元素相对于其父元素的位置。调用.position（）后，您可以使用属性top和left访问元素坐标。

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

顶部位置加上其高度大于零的元素是可见的。

这是我的意思的一个例子。

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

Answer 2

我认为最好的方法是在你的滚动事件中捕获div的scrollTop值并将其与每个li元素的顶部进行比较（可能会添加高度，以便您可以看到元素是否完全在视野之外）。

Answer 3

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/

希望这会有所帮助：）

Answer 4

这样的东西会起作用，你可以用显示逻辑替换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>

Scrollable Div，可以看到哪些元素

4 个答案:

更新