Question

首先我知道有类似的线程，但大多数都使用li项目，而且我很难混淆使用该代码以造福我。

这是......我有一个溢出的元素和一些最大高度。在里面我有另一个div元素和一个锚点，每个元素都有我的数据。我希望能够判断父母是否已经溢出，如果是，请做一些事情。根据情况，我希望溢出中的最后/第一个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子元素的当前位置，然后在它们上面运行你的逻辑。

如果他们的css top属性为＆gt; = 0并且同时height为主要div 值小于当前div子的top + height}。

看看这段代码：

$('#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以检测 first 和 last 完全可见的元素，如前所述。设置好后，他们的html将被测试消息取代。不应接收操作的项目会使用inner html属性覆盖data-id。

如果你想要甚至部分那些都有一个动作，你可能需要调整一下，这是代码中注释的块，我设置了一个使用动作的示例小提琴在顶部/中部/底部的情况下。

正常工作 FIDDLE ：http://jsfiddle.net/nyupm/5/

带有溢出的div中的第一个和最后一个可见项

1 个答案: