title: Get the first and last visible element in a scrollable div
body: <p>I have list of thumbs in a scrollable div, animated with next/prev button. Each click on "next "button should match the attribute of the first visible element. Each click on "prev" button should give me the attribute of the last visible element. </p>
  
  <p>I don't really know how to mathematically solve that, because the scroll distance is variable when the list ends. Can someone please help me out?</p>
  
  <p>HTML</p>
  
  <pre><code>$&lt;div id="scrollContent"&gt;
      &lt;ul id="assetList"&gt;
          &lt;li data-asset-id="15201"&gt;&lt;/li&gt;
          &lt;li data-asset-id="15202"&gt;&lt;/li&gt;
          &lt;li data-asset-id="15203"&gt;&lt;/li&gt;
          ...        
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;a class="next" href="#"&gt;next&lt;/a&gt;
  &lt;a class="prev" href="#"&gt;prev&lt;/a&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('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
  
      });
  });
  </code></pre>
  
  <p>Check out the fiddle:
  <a href="http://jsfiddle.net/desCodLov/77xjD/10/">http://jsfiddle.net/desCodLov/77xjD/10/</a></p>
  
  <p>Thank you.</p>