Как отменить анимацию, когда список заканчивается

Question

Я делаю прокрутку элементов списка с помощью функции JQuery Animate 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()
    }