Получить первый и последний видимый элемент в прокручиваемом элементе div
У меня есть список превью в прокручиваемом элементе div, анимированном кнопкой Next / prev. Каждое нажатие на кнопку «Далее» должно соответствовать атрибуту первого видимого элемента. Каждое нажатие на кнопку «предыдущая» должно давать мне атрибут последнего видимого элемента.
Я действительно не знаю, как математически решить это, потому что расстояние прокрутки является переменной, когда список заканчивается. Может кто-нибудь помочь мне?
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>
lt;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/
Спасибо.