jquery - 在没有滚动条的固定div内创建可滚动div

Question

我在固定 div 内创建了一个滚动 div，如下:

http://jsfiddle.net/Newtt/9zRHx/

.scrollable {
    width: 200px;
    height: 200px;
    background: #333;
    overflow: scroll;
}
.fixed {
    position: absolute;
    top: 180px;
    width: 200px;
    height: 20px;
    background: #fa2;
}

但是，我想创建一个滚动按钮。现在，JQuery 可以在 Fiddle 上运行，也可以在我希望它运行的网站上运行:

http://leonardorestaurant.in/testing/services.html

JQuery:

$(document).ready(function () {
    $("#down").click(function () {
        $('.scrollable').animate({
            scrollTop: 220
        }, "slow");
    });
    $("#up").click(function () {
       $('.scrollable').animate({
            scrollTop: -200
        }, "slow");
    });
});

但是，它并没有按照我想要的方式工作。每次单击必要的箭头时，我都需要它向下或向上滚动。

在当前方法中，它仅滚动一次，之后不再继续。是否可能是因为我将滚动量设置得太大？另外，是否可以隐藏滚动条但保留滚动操作？

Answer 1

使用 +=/-= 指示动画方法添加该金额，而不是将其设置为最终值。

$(document).ready(function () {
    $("#down").click(function () {
        $('.scrollable').animate({
            scrollTop: '+=220'
        }, "slow");
    });
    $("#up").click(function () {
       $('.scrollable').animate({
            scrollTop: '-=220'
        }, "slow");
    });
});

演示位于 http://jsfiddle.net/9zRHx/1/

---

了解更多信息:http://api.jquery.com/animate/#animation-properties

.animate()

Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.