第一个和最后一个可见的项目在一个DIV与溢出

Question

首先，我知道有类似的线程，但其中大多数使用李项目，我是geeting太混乱，使用该代码为我的利益。

这里是...我有一个溢出和一些最大高度的元素。在里面我有另一个div元素和一个锚点，每个元素都有我的数据。 我希望能够判断父母是否已经飞越，如果是，就做点什么。 根据我想要的最后/第一格的情况下，是可见做些事情。

有什么比一个例子更好...所以这里是我在jsfiddle

例子，jQuery中的基本逻辑，我想在评论中实施：

var container = $('#content_wrapper'); 
var items = container.children('.box_wrap'); 

//If div is overflown then do: 
/items.each(function() { 
    //If scroll is at top 
    //Get last element that is shown 
    //Do something 

    //Else if scroll is at bottom 
    //Get first element and do something 

    //Else if scroll is at mid range 
    //get first and last element that is shown 
    //and do something 
} 

Answer 1

恐怕没有小事这个问题的解决方案（不添加插件），但是你可以使用scroll jquery事件来观察你的div子元素的当前位置，然后对你的逻辑进行处理。

我们可以知道，如果我们的产品具有明显的完全，在div区域内，如果他们的CSS top属性为> = 0，并在同一时间主要格价值height小于（top + height） 当前div小孩。

看看这块代码：

$('#content_wrapper').scroll(function() { 
    var areaHeight = $(this).height(); // gets the height of content_wrapper 

    //will receive first/last elements found 
    var first_ele = null; 
    var last_ele = null; 

    items.each(function(index, value) { 
    var top = $(this).position().top; //top position of element 
    var height = $(this).height(); 

    /* detection can be altered here */ 
    if (top > -1 && first_ele == null){ //first entirely visible element 
     first_ele = this; 
    } 
    else if (top+height > areaHeight && last_ele == null){ 
     last_ele = $(items[index-1]);//the last entirely visible was the element before 
    } 

    // those not being first or last receive data-id back 
    $(this).children().first().html($(this).children().first().attr('data-id')); 
    }); 

    //action to first element, avoid first of list 
    if(first_ele !== items[0]) 
    $(first_ele).children().first().html('test start');  
    //action to last element      
    $(last_ele).children().first().html('test end'); 
}); 

通过items这段代码，我们可以循环检测第一和最后像前面提到的完全可见的元素。随着他们设置，他们的html被测试消息所取代。不应接收操作的项目将使用data-id属性覆盖inner html。

如果你想要部分有一个动作，这是在代码中评论的块，我可能需要调整一下，我已经用一个例子设置了一个小提琴，其中使用顶部/中部的动作/底部情况。

全部工作FIDDLE：http://jsfiddle.net/nyupm/5/