Question

I have a div with overflow set to hidden. Two triggers allow to scroll items inside the layer with overflow.

I have an overflow div with items hidden. I can scroll the boxes inside the hidden area on click of UP/DOWN elements:

$("#up").click(function(){
    $("#container").find(".box").animate({"top": "+=20px"}, "slow");
});
$("#down").click(function(){
    $("#container").find(".box").animate({"top": "-=20px"}, "slow");
});

<style>
#itemsList {
    height:60px;
}
.box {
    height:20px;
    position:relative;
}
</style>

<div id="container">                        
    <div id="up" class="scroll">UP</div>
    <div id="itemsList">
        <div id="item1" class="box">item 1</div>
        <div id="item2" class="box">qweqweqwe</div>
        <div id="item3" class="box">qqqqqqqq</div>
        <div id="item4" class="box">eeeeeee</div>
        <div id="item5" class="box">rrrrrrrr</div>
        <div id="item6" class="box">tttttt 11</div>
    </div>
    <div id="down" class="scroll">DOWN</div>
</div>

I need to disable .animate() once the scroll reaches first or last elements. The code above works, but it does not stop .animate(). I’ve added some code to check for position of the scrollable elements (see jsfiddle link) but it seems like I messed something up.

Here’s my JSfiddle.

Answer 1

You should look into the ‘ScrollTo’ jquery plugin.. This will allow you to scroll to a specific item (with animation) rather than arbitrarily adding 20px to the scroll position.

Here is a quasi-working demo. Note that I updated the jQuery to 1.7 and included the scrollTo library http://jsfiddle.net/VP5Xb/12/

You could also accomplish this easily by obtaining the y coordinate of the items and changing the scrolltop value.