获取可滚动div中的第一个和最后一个可见元素 [英] Get the first and last visible element in a scrollable 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

    });
});

查看小提琴: http://jsfiddle.net/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');
            }
        });
    });
});

小提琴: http://jsfiddle.net/77xjD/17/

这篇关于获取可滚动div中的第一个和最后一个可见元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！