获取可滚动 div 中的第一个和最后一个可见元素答案

【问题标题】：Get the first and last visible element in a scrollable div获取可滚动 div 中的第一个和最后一个可见元素
【发布时间】：2012-01-12 15:46:21
【问题描述】：

我在一个可滚动的 div 中有一个拇指列表，带有下一个/上一个按钮的动画。每次单击“下一步”按钮都应匹配第一个可见元素的属性。每次单击“上一个”按钮都应该给我最后一个可见元素的属性。

我真的不知道如何在数学上解决这个问题，因为列表结束时滚动距离是可变的。有人可以帮帮我吗？

HTML

$<div id="scrollContent">
    <ul id="assetList">
        <li data-asset-id="15201"></li>
        <li data-asset-id="15202"></li>
        <li data-asset-id="15203"></li>
        ...        
    </ul>
</div>
<a class="next" href="#">next</a>
<a class="prev" href="#">prev</a>

jQuery

$('a.next').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
    $("#scrollContent").animate({scrollTop:scrollheight+375},500,function() {  
        // get "data-asset-id" of first visible element in viewport

    });
});

$('a.prev').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
    $("#scrollContent").animate({scrollTop:scrollheight-375},500,function() {
        // get "data-asset-id" of last visible element in viewport

    });
});

看看小提琴： http://jsfiddle.net/desCodLov/77xjD/10/

谢谢。

【问题讨论】：

标签： jquery match visible scrollable

【解决方案1】：

这就是你要找的吗？？：

var first, last;

$('a.next').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
    $("#scrollContent").animate({scrollTop:scrollheight+375},500,function() {  
        $("#assetList li").each(function() {
            if ($(this).offset().top == 1 && $(this).offset().left == 0) {
                first = $(this).attr('data-asset-id');
            }
        });
    });
});

$('a.prev').click(function() {
    var scrollheight = $("#scrollContent").scrollTop();
    $("#scrollContent").animate({scrollTop:scrollheight-375},500,function() {
        var Otop = $("#scrollContent").height() - $("#assetList li").height() - parseInt($("#assetList li").css('margin-top'));
        var Oleft = ($("#assetList li").width() + parseInt($("#assetList li").css('margin-right'))) * 3;
        $("#assetList li").each(function() {
            if ($(this).offset().top == Otop && $(this).offset().left == Oleft) {
                last = $(this).attr('data-asset-id');
            }
        });
    });
});

小提琴：http://jsfiddle.net/77xjD/17/

【讨论】：

是的！只需要做一个小的修改，顶部边框也必须减去。谢谢

【解决方案2】：

我刚刚在您的fiddle 中更新了解决方案。

我在初始化时缓存了第一个 li 的顶部和最后一个 li 的顶部位置，并在您单击下一个或上一个按钮时使用它们来找出哪个元素正在获取该位置。

当然，我从Rob W's 答案中复制了以下几行。

var $container = $("#assetList"),
$items = $container.children("li"),

【讨论】：

感谢您的解决方案，很好。

【解决方案3】：

通过可见性，我假设元素至少应该使右上角可见。如果您只想选择完全可见的元素，请添加或减去元素的 width() 和 height() 值。基本代码如下：

var $first, $last,
    $container = $("#assetList"),
    $items = $container.children("li"),
    positions = container.offset(),
    rightside = positions.left + $container.width(),
    bottomside = positions.top + $container.height();
$items.each(function(){
    var $this = $(this),
        position = $this.offset();
               // If <li> top post >= <ul> top
    if ($first && position.top >= positions.top
               // If <li> left >= <ul> left
               && positions.left >= position.left) {
             /* Optionally, add two more conditions, to only accept elememts
                which are fully visible: 
               && positions.top + $this.height() <= bottomside
               && positions.left + $this.width() <= leftside
              */
        $first = this;
    }
    // See previous comments.
    if (position.top < bottomside && position.left < rightside) {
        $last = this;
    }
});
// $first = first visible element, eg [HTMLLiElement]
// $last = last visible element, eg [HTMLLiElement]

【讨论】：