使用按钮垂直滚动div

Question

我正在使用HTML，CSS，Javascript和jQuery构建移动应用程序。

有没有办法只使用两个按钮滚动比移动屏幕（480px）更长（700px）的div，一个用于向下，一个用于向上？

因此，当用户按下并按住向下按钮时，它似乎一次向下滚动div大约10px。

编辑：

移动应用程序实际上是使用Phonegap编译的，因此它不是移动网站，而是实际应用程序。

应用程序具有相当大的拖放功能，为了使用JQuery和HTML执行此操作，我必须将mousedown，mouseup和mousehover事件绑定到触摸事件。

因此，用户不能像通常的应用程序那样简单地拖动屏幕滚动。因此，我决定使用物理按钮而不是滚动导航div。

导航div设置为具有比画布（屏幕高度和宽度）div更高的高度。这将是用户滚动的div。

Answer 1

你在谈论滚动整页的div吗？或者它是一个特定的div，你想在页面中“滚动”（有点像iframe）？

两者都可以完成。如果你正在滚动整页，我不确定你为什么要使用按钮而不是让Safari只是处理标准的滑动手势。但是，它可以这样做：

1. 在按钮上使用固定定位，以便在屏幕的其余部分滚动时不会移动。
2. 使用jQuery的.scrollTop方法进行滚动。

另一方面，如果您想在单个div上进行滚动效果，而不滚动页面的其余部分，则只需执行以下操作：

1. 在另一个包含overflow:hidden; position:relative
的div中包裹该div
2. 制作内部div position:absolute
3. 为内部div的top属性设置动画以创建滚动效果。

Answer 2

您可能会发现此插件很有用：http://logicbox.net/jquery/simplyscroll/vertical.html

无论如何，你为什么需要那个？如果内容大于屏幕，则用户可能能够用手指轻扫滚动。