javascript - 使用按钮垂直滚动 div

Question

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

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

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

编辑:

移动应用程序实际上是用 Phonegap 编译的，所以它不会是一个移动网站，而是一个实际的应用程序。

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

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

导航 div 设置为比 Canvas (屏幕高度和宽度)div 具有更大的高度。这将是用户正在滚动的 div。

Answer 1

div 是指滚动整个页面本身吗？还是您想在页面内“滚动”的特定 div(有点像 iframe)？

两者都可以做到。如果您要滚动整个页面，我不确定您为什么要使用按钮而不是让 Safari 简单地处理标准的滑动手势。但是，可以这样做:

1. 在按钮上使用固定定位，这样它们就不会随着屏幕其余部分的滚动而移动。
2. 使用 jQuery 的 .scrollTop滚动的方法。

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

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