我有一组缩略图在可滚动的 div 中,通过 next/prev 按钮进行动画处理。每次单击 "下一个" 按钮都应该与第一个可见元素的属性匹配。每次单击 "上一个" 按钮都应该给我最后一个可见元素的属性。我不知道如何通过数学方法来解决这个问题,因为当列表结束时,滚动距离是可变的。请问有人能帮我吗?
HTML
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>
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
});
});
请查看这个fiddle: http://jsfiddle.net/desCodLov/77xjD/10/
谢谢。