Question

我有一个div设置为隐藏溢出。两个触发器允许使用溢出滚动图层内的项目。

我有一个隐藏项目的溢出div。我可以点击UP / DOWN元素滚动隐藏区域内的框：

$("#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>

一旦滚动到达第一个或最后一个元素，我需要禁用.animate（）。上面的代码有效，但它不会停止.animate（）。我添加了一些代码来检查可滚动元素的位置（请参阅jsfiddle链接），但似乎我搞砸了一些东西。

这是我的JSfiddle。

Answer 1

您应该查看'ScrollTo'jquery插件..这将允许您滚动到特定项目（带动画），而不是任意添加20px到滚动位置。

这是quasi-working demo。请注意，我将jQuery更新为1.7并包含scrollTo library http://jsfiddle.net/VP5Xb/12/

您还可以通过获取项目的y坐标并更改scrolltop值来轻松完成此操作。

一旦最后一个项目到达w / jQuery，就停止.animate（）

1 个答案: