Question

我创建了一个在Samsung Galaxy Tab 10.1上运行的Android 3.1 Tablet应用程序，该应用程序使用可滚动的div（overflow-y:scroll）在WebView中呈现HTML5应用程序。容器可滚动div设置为特定高度，子加载列表在加载时动态创建。

在Android 3.1设备的浏览器中，可滚动容器div似乎剪辑长列表的可滚动内容，仅在用户将未渲染内容滚动到视图中时用内容刷新溢出div。但是，在 Android WebView 中，可滚动的div会执行不刷新，并在剪切的内容滚动到视图中时显示更多内容。

虽然其他帖子建议使用iScroll，但我发现在我的测试设备（Galaxy Tab 10.1）的一个HTML页面上需要多个可滚动的div时它会相当迟缓。

示例应用代码：

public class MyActivity extends Activity {
    WebView mWebView;
    ...
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setWebViewClient(new WebViewClient());
        WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setDomStorageEnabled(true);
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.loadUrl("file:///android_asset/index.html");
    }
    ...
}

示例溢出Div页面（index.html） - 用于为列表创建随机数的jQuery：

<html>
<head>
<style type="text/css">
  #overflow_container {background: #cecece; height:600px; overflow-y: scroll;}
  p {margin-left:20px;}
  ol {padding-top:0px;margin-top:0px;}
  ol li {line-height:48px;border-bottom:1px solid white;height:48px;}
  .container { color:#333;}
</style>
<script src="http://jquery.com/src/jquery-latest.js"></script>
<script type="text/javascript">
  $(function() {

    $("#content_list").html("<ol></ol>");
    for(var i = 0; i< 100; i++) {
      $("#content_list ol").append("<li>" + (Math.random() * 1000) + "</li>");
    }
  });
</script>
</head>
<body>
<div class="container">
  <h2>Overflow Contents</h2>
  <p>Ordered List of Random Numbers inside a scrollable div <code>overflow-y:scroll</code></p>
  <div id="overflow_container">
    <div id="content_list">
    </div>
  </div>
</div>
</body>
</html>

提前致谢。

Answer 1

阿尔弗雷德，谢谢你问这个。 Android 3.2上的PhoneGap应用程序遇到了同样的问题到目前为止，我们已经能够通过以下方式获得至少一些改进：

"#TARGET touchmove": function() {
  var target = document.getElementById("TARGET");
  target.style.display="none";
  target.offsetHeight;
  target.style.display="block";
}

（您可以将其重新格式化为jquery样式，它应该可以使用，关键是三个目标操作。从我们对不同组合的所有测试中，这似乎是唯一有效的。）

这篇文章似乎最好地解释了发生了什么。 http://code.google.com/p/android/issues/detail?id=19827#hc16

我们尚未完成我们的解决方案，因为在我们的touchmove事件触发后，滚动动量滚动太远。到目前为止似乎升级到4.1可能是一个不错的选择，当然可能。在其他情况下，我们正在研究这些选项：

禁用滚动动量，我们希望这将使上述解决方案成为一个体面的用户体验。
防止touchmove上的默认设置并自己处理滚动操作，目的是让touchend触发，然后将相同的功能附加到touchend。

Android 3.1 WebView溢出滚动 - 滚动时不渲染长列表

1 个答案: