如何在 WebView 中的 Android 上独立滚动行和列（一个 Netflix 应用程序）？答案

【问题标题】：How to do independently scrolling rows and columns (a la Netflix app) on Android in a WebView?如何在 WebView 中的 Android 上独立滚动行和列（一个 Netflix 应用程序）？
【发布时间】：2013-08-21 23:34:37
【问题描述】：

在 Netflix 的 Android 应用中，有一个 WebView 几乎覆盖了整个应用的区域。当您从左到右拖动一行时，它将仅滚动该行，并使用良好的惯性滚动来滚动。如果你上下拖动，它会上下滚动整个页面。

我已经设法在 iOS 上复制了这个功能（在 uiWebView 以及 Safari 中），但在 Android 上没有。在 Android 设备上，我所做的任何事情要么滚动非常缓慢，要么您必须非常小心地垂直滚动才能通过触摸行之间的背景区域开始。两者都不可接受。显然，我不想在 javascript 中做滚动动画，因为那太慢了。

我知道 Netflix 使用 WebView 来做这件事，所以....他们使用的是什么技巧？

我尝试过使用 css 属性（用于行 div）：

overflow-y: hidden;
-webkit-overflow-scrolling-x: touch

无济于事。

【问题讨论】：

据我所知，WebView 只是网页显示的“门户”，其中的任何内容都只是 HTML、CSS 和 JavaScript，与 Android 无关。
嗯，惯性触摸功能在 iOS 和 Android 中的实现方式不同。例如，“-webkit-overflow-scrolling-x: touch”对桌面上运行的浏览器没有影响，但会影响它在 Android 或 iOS 应用程序中的工作方式。他们做了很多具体的事情来使浏览器在基于触摸的平台上很好地工作——诀窍是知道如何利用它们。
您是否考虑过他们可能没有使用 WebView？也许它实际上是一个实现的 XML 布局？
它是通过 webview 完成的。他们在他们的博客中说了这么多，你可以做各种各样的事情来判断正在运行的内容。（例如，在这里查看我的问题：stackoverflow.com/questions/18115922/…）
如果您在优化此问题方面需要帮助，您需要发布一些运行速度不够快的简单示例的代码。

标签： android uiwebview android-webview

【解决方案1】：

如果您无法获得与特定 WebView 兼容的 CSS Android，为什么不创建仅将请求的行输出到单独的 WebView 中的服务器端功能？

我会做以下事情：
* 查询网络服务器以确定有多少行。
* 以编程方式添加 Web 服务器所说的行数。例如，如果服务器报告有 5 行，则创建 5 个 WebView，每个都有自己的 URL 参数（例如：第一个 WebView 将查询 mydomain.com/wv?row=1）。
* 将每个WebView行放在一个HorizontalScrollView中，将所有HorizontalScrollViews放在一个VerticalScrollView中。
* 在 URL 更改时，转到显示所单击磁贴详细信息的全页 WebView。
* 在后按时，关闭整页 WebView 并重新加载行。

不是最干净的解决方案，但应该可以正常工作。

【讨论】：

我认为这行不通。滚动不会像希望的那样工作（在大多数情况下以上下方向移动手指会移动整个视图，而左右将滚动 Web 视图中的元素。不管 Netflix 证明它可以按照我需要的方式完成它。
为了让它更好一点 - 为所有这些设置相同的 url，一些 url 将显示特定行的“加载”页面。然后，在 android 列表视图“createView”方法上，使 webview 执行 ajax 请求以获取特定的行数据。在这种情况下，滚动会更加流畅。

【解决方案2】：

尝试在您的 HTML 中使用 iScroll。
在链接中，您可以找到源代码、示例和 javascript 库。
它还有一些有用的回调。
我在使用 WebView 时经常使用它。

【讨论】：

有没有办法做到横竖独立？我没有看到任何例子表明这一点。

【解决方案3】：

Netflix 可以使用自定义手势检测并查看滚动是否更水平然后垂直或更垂直而不是水平，然后根据滚动的距离水平或垂直滚动 webview

【讨论】：