स्क्रोल करने योग्य div

Question

में पहला और अंतिम दृश्य तत्व प्राप्त करें मेरे पास स्क्रॉल करने योग्य div में अंगूठे की सूची है, जो अगली/पिछली बटन के साथ एनिमेटेड है। "अगला" बटन पर प्रत्येक क्लिक को पहले दृश्य तत्व की विशेषता से मेल खाना चाहिए। "पिछला" बटन पर प्रत्येक क्लिक मुझे अंतिम दृश्य तत्व की विशेषता देनी चाहिए।

मुझे वास्तव में यह नहीं पता कि गणितीय रूप से इसे कैसे हल किया जाए, क्योंकि सूची समाप्त होने पर स्क्रॉल दूरी परिवर्तनीय है। क्या कोई व्यक्ति कृपा करके मेरी सहायता करेगा?

एचटीएमएल

$<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/

धन्यवाद।

Answer 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/

Answer 2

दृश्यता से, मुझे लगता है कि तत्व को कम से कम ऊपरी दाएं कोने दिखाना चाहिए। यदि आप केवल उन तत्वों का चयन करना चाहते हैं जो पूरी तरह से दिखाई दे रहे हैं, तो 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] 

Answer 3

मैं सिर्फ अपने fiddle में समाधान अद्यतन किया है।

प्रारंभिक समय पर मैंने पहली ली के शीर्ष और अंतिम ली की शीर्ष स्थितियों को कैश किया और यह पता लगाने के लिए कि कौन सा तत्व स्थिति प्राप्त कर रहा है, जब आप अगले या पिछले बटन पर क्लिक करते हैं।

और मैंने निम्न पंक्तियों को Rob W's उत्तर से कॉपी किया है।

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