我在可滚动 div 中有拇指列表,并使用下一个/上一个按钮进行动画处理。每次单击“下一步”按钮都应与第一个可见元素的属性匹配。每次单击“上一个”按钮都应该给我最后一个可见元素的属性。
我真的不知道如何从数学上解决这个问题,因为列表结束时滚动距离是可变的。有人可以帮我吗?
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/
谢谢。
最佳答案
这就是你要找的吗? :
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');
}
});
});
});
fiddle :http://jsfiddle.net/77xjD/17/
关于jquery - 获取可滚动 div 中的第一个和最后一个可见元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8376230/