在滚动div中获取第一个也是最后一个可见元素

我有一个可滚动div的缩略图列表，用next/prev按钮制作动画。每次点击“下一步”按钮都应该匹配第一个可见元素的属性。每次点击“prev”按钮应该给我最后一个可见元素的属性。在滚动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/

谢谢。

来源

2011-12-04 Thomas

-1什么我的朋友？ – Thomas

这是你要找的？：

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/

来源

2011-12-04 16:43:05 adeneo

是的！只需做一个小小的修改，顶部边界也必须被减去。谢谢 – Thomas

通过可见性，我认为元素应该至少有可见的右上角。如果您只想选择完全可见的元素，请添加或减去元素的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]

来源

2011-12-04 15:40:28

不错，谢谢。 – Thomas

我刚刚更新了解决您的fiddle。

我在初始化时缓存了第一个li的顶部并保留了li的顶部位置，并使用它们来查找哪个元素获取了位置，当您单击next或previous按钮时。

和当然我从以下副本复制了Rob W's答案。

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

来源

2011-12-04 16:40:11

谢谢你的解决方案，很好。 – Thomas

在滚动div中获取第一个也是最后一个可见元素

回答

相关问题