获取可滚动div中的第一个和最后一个可见元素

本文介绍了获取可滚动div中的第一个和最后一个可见元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个可滚动的div中的拇指列表，并用下一个/上一个"按钮进行了动画处理.每次单击下一步"按钮都应匹配第一个可见元素的属性.每次单击上一个"按钮都应为我提供最后一个可见元素的属性.

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.

我真的不知道如何用数学方法解决这个问题，因为列表结束时滚动距离是可变的.有人可以帮我吗?

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?

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 }); });

查看小提琴: jsfiddle/desCodLov/77xjD/10/

谢谢.

推荐答案

这是您要寻找的吗? :

Is this what your looking for ?? :

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'); } }); }); });

小提琴: jsfiddle/77xjD/17/