在android蜂窝webview/webkit中实现水平/垂直手指滑动滚动？

Posted 2023-05-07

【中文标题】在android蜂窝webview/webkit中实现水平/垂直手指滑动滚动？

【英文标题】：Implementing horizontal/vertical finger swipe scrolling in android honeycomb webview/webkit?

【发布时间】：2011-12-04 14:42:51

【问题描述】：

我正计划实现基于 WebView 的 Honeycomb 平板应用程序（因此，基本上它将是一个仅为 平板电脑 制作的 HTML5 基于 Web 的应用程序）。

我希望通过滑动手指来实现水平和垂直滚动。为了更好地理解，我创建了示例大纲。

---

这张图片显示了类似于 Honeycomb 的原生设置活动，左右页面可垂直滚动

欢迎任何类型的指南或资源。谢谢

【参考方案1】：

看看iScroll：

iScroll 4 是对原始iScroll 代码的完全重写。开始脚本开发是因为移动 webkit（在 iPhone、iPad、android 上）不提供在固定宽度/高度元素内滚动内容的本机方式。这种不幸的情况会阻止任何网络应用程序具有 position:absolute 页眉和/或页脚以及内容的滚动中心区域。

虽然最新的 Android 版本支持此功能（尽管支持不是最佳的），但 Apple 似乎不愿意将单指滚动添加到 div...

【讨论】：

谢谢，我看了一下它是用于垂直滚动的。我正在考虑使用它。

只是想更新这个问题 - 我们已经将 iScroll 用于 ios 和 Android 的相对较大的应用程序。最后，它产生的头痛比它解决的要多得多。不要误会我的意思，iScroll 是一个不错的库，它运行良好，但也有缺点。因此，在选择此类库之前，您应该彻底检查这一点。只是把它当作一个警告。谢谢

是的，在更大的应用程序中使用它后，我也发现它更有问题，如果您正在构建合理大小的东西，请避免使用 iScroll。

那你改用什么了？

我在支持的设备上使用了 jQuery mobiles 实现，而在所有其他设备上使用静态页眉和页脚。

【参考方案2】：

这是我目前发现的：

这取决于您希望如何实现滚动。如果您想附加滑动事件，这是使用知名库实现的最简单方法：

jqTouch

- 它具有左右滑动事件，可以钩住左右滚动（似乎所有基于 webkit 的动画都只在 iOS 设备上工作）。 请注意，该项目仍处于测试阶段，并不十分活跃。 编辑：这也是 Sencha Labs 的一部分 - 积极维护 Sencha Touch。

Sencha Touch

- 他们对移动设备和平板电脑中的几乎所有东西都有更好的支持。 （注意：开源应用程序免费，但商业应用程序不免费 - 编辑：他们实际上有商业许可证。有关许可的更多信息，请参见他们的网站）

jQueryMobile

- 它们非常稳定（目前在 RC1 中），并且有左右滑动事件，但我找不到向上或向下滑动。如果您只需要左右滑动，点击，点击按住，然后使用 jQM。他们拥有最好的社区支持。

RAW JS

- 最后，如果您想要一些原始 javascript，请访问 html5Rocks article 以更深入地了解触摸事件的工作原理。

我希望它有所帮助。我仍在努力实现向上向下滚动，因为我不想等待滑动结束，而是尝试实现即时滚动反馈，使用 RAW JS 坐标非常接近，但并不令人满意。

【参考方案3】：

Hammer JS 对我很有用：

http://eightmedia.github.io/hammer.js/

【讨论】：

自从我遇到这个问题以来，JS 库已经走了很长一段路。感谢分享伊恩。

不用担心，只是想我会添加以防其他人遇到此线程。

【参考方案4】：

来自 iScroll 的创建者，SwipeView 似乎是一个不错的专用替代方案。看看demo 1 和demo 2。

我还没有测试，但我肯定会。因为演示在我的 iPad 上运行良好。

【参考方案5】：

您可能会发现这个库非常有用：https://github.com/cubiq/2-way-iScroll

它处理垂直滚动和水平滑动的情况。