Scrollable Div,可以看到哪些元素
我们有一个可以滚动的div,它有CSS hieght:40px;
。 里面有多个LI height:20px
item1 item2 item3 item4 item5 item6 item7 item8 item9
当用户滚动时,我想触发一个脚本,该脚本确定可见的两个元素中的第一个元素。 div滚动旨在捕捉元素。 因此,如果向下滚动并且项目3和项目4可见,我如何资助项目3是最顶层的可见元素。
我尝试了$('#scroller li:visible')
但这并不起作用,因为div关注它们只是隐藏在容器后面。
有任何想法吗,
奇妙
更新
更新了一个工作示例http://jsfiddle.net/U4qyp/32/
我认为.position()
应该做的工作。 它为您提供元素相对于其父元素的位置。 调用.position()后,可以使用top
和left
属性访问元素坐标。
http://api.jquery.com/position/
顶部位置加上其高度大于零的元素是可见的。
这是我的意思的一个例子。
我认为最好的方法是在你的滚动事件中捕获div的scrollTop值并将其与每个li元素的顶部进行比较(可能添加高度,以便您可以看到元素是否完全不在视图中)。
jQuery的position
方法获取相对于容器的位置,你可以通过$("li").position().top;
获得最高位置$("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/
希望这可以帮助 :)
这样的东西可以工作,你可以用你的显示逻辑替换console.log。