CODEWITHSUNDEEP
jqueryjquery-scrollablejquery-animate
n92
n92

Reputation: 7592

How to cancel the animation when list reaches the end

I am doing scrolling of list items using jquery animate function The html code is below 

<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>

and In JS

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

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

In CSS 

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

Now, I can scroll the list, But the problem is I cant able to stop the scroll, Its scrolling infinitely,

I want the scroll(up/down) to be stopped when the last item is shown at the bottom,So that user can understand that is the last item. Can anyone help me in doing this. And one more thing is this the good idea to implement scrolling of list.

Upvotes: 1

Views: 85

Answers (1)

Shih-En Chou
Shih-En Chou

Reputation: 4165

How about this?

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

Upvotes: 1

Related Questions