在没有滚动条的固定 div 内创建可滚动的 div答案

【问题标题】：Create scrollable div inside fixed div without scroll bar在没有滚动条的固定 div 内创建可滚动的 div
【发布时间】：2015-03-17 22:25:39
【问题描述】：

我在固定 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");
    });
});

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

在当前方法中，它只滚动一次，之后不再继续。是不是因为我的滚动量太大了？另外，是否可以隐藏滚动条但保持滚动动作？

【问题讨论】：

Siddharth，仅出于此目的，您为什么不使用带有样式的锚标签，还可以使用 overflow:hidden（在 .scrollable 内）隐藏滚动条但保持滚动动作。

标签： jquery html css scroll

【解决方案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/

.animate()

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

【讨论】：