Question

我在固定div中创建了一个滚动div，在这里：

.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

使用+= / -=指示animate方法添加该数量，而不是将其设置为最终值。

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

动画属性也可以是相对的。如果一个值带有前导+=或-=字符序列，则通过在属性的当前值中加上或减去给定数字来计算目标值。

在固定div内创建可滚动div而不使用滚动条

1 个答案: