列表到达末尾时如何取消动画

Question

我正在使用jquery动画函数滚动列表项 html代码如下

<ul>
    <div class="scrollable" id="web_list">
        <div class="updown">
            <a class="up" onclick="scrollUp('web_list')">UP</a>
        </div>
        <div class="items">
            <li>item 1<li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
        <div class="updown">
            <a class="down" onclick="scrollDown('web_list')">DOWN</a>
        </div>
</ul>

和在 JS 中

function scrollDown(scrollDiv){
    $('#'+''+scrollDiv+' .items li').animate({top:'-=43'});
}
function scrollUp(scrollDiv){
    $('#'+''+scrollDiv+' .items li').animate({top:'+=43'});
}

在 CSS 中

.scrollable .items li {
  position:relative;
  overflow: hidden;
 }

现在，我可以滚动列表，但问题是我无法停止滚动，它的无限滚动，

我希望当最后

一项显示在底部时停止滚动（向上/向下），以便用户可以理解这是最后一项。谁能帮我做到这一点。还有一件事是实现列表滚动的好主意。

Answer 1

这个怎么样？

 if( $("div.items:first").offset().top + $("div.items:first").height() <= 
     $("div.items:first li.items:last").offset().top + 
     $("div.items:first li.items:last").height()     
    ){
            //stop scrolling
            $("a.down").hide()
    }