在最后一个<li> </li>的末尾停止滚动

时间:2013-07-26 06:18:32

标签: javascript jquery

我有这个小提琴http://jsfiddle.net/kureiii/45Exw/

var cur = 1;
var max = $(".collectionsCnt2").children("li").length;

$(".button-right").click(function () {

if (cur + 1 > max) return;
cur++;

$(".collectionsCnt2").animate({
    marginLeft: "-=500px",
}, 1000);

});

(".button-left").click(function () {
if (cur - 1 < 1) return;
cur--;
$(".collectionsCnt2").animate({
    marginLeft: "+=500px",
}, 1000);

});

滚动工作正常,但我希望滚动到达最后一个li或最后一个框时停止?...

2 个答案:

答案 0 :(得分:0)

试试这个:

var cur = 1;
var max = $(".collectionsCnt2").children("li").length;

$(".button-right").click(function () {

    if (cur >= max) return;
        cur =  cur + (500/100 < max ? 500/100 : max);

        $(".collectionsCnt2").animate({
        marginLeft: "-=500px",
    }, 1000);

});

$(".button-left").click(function () {
    if (cur <= 1) return;
        cur =  cur - (500/100 < max ? 500/100 : max);
        $(".collectionsCnt2").animate({
            marginLeft: "+=500px",
        }, 1000);

    });
});

答案 1 :(得分:0)

Fiddle

而不是对值进行硬编码,而是可以这样做,

marginLeft: -$(".collectionsCnt2 li:last-child").offset().left + $(".collectionsCnt2")[0].scrollLeft -51 + 'px'