Android 3.1 WebView溢出滚动 - 不滚动滚动的长列表

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

在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"); 
    } 
    ... 
}

例溢出股利页（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>

感谢。

来源

2011-10-20 Alfred Lau

Alfred，感谢您提出这个问题。我们在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可能是一个不错的选择，当然可能。在其他情况下，我们正在研究这些选项：

禁用滚动动量，我们希望可以让上述解决方案成为体面的用户体验。
防止默认触摸移动并自己处理滚动操作，目的是让触发器触发并附加相同的函数来触发。

来源

2013-02-08 22:40:30 abaumer

Android 3.1 WebView溢出滚动 - 不滚动滚动的长列表

回答

相关问题