Android 3.1 WebView溢出滚动 - 不渲染滚动上的长列表
我创建了一个在 Samsung Galaxy Tab 10.1 上运行的 Android 3.1 平板电脑应用程序，该应用程序使用可滚动 div (overflow-y:scroll) 在 WebView 中呈现 HTML5 应用程序。容器可滚动 div 设置为特定高度，并且子 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");
}
...
}
示例 Overflow 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>
提前致谢。
I've created an Android 3.1 Tablet app running on a Samsung Galaxy Tab 10.1 that renders an HTML5 app in a WebView using scrollable divs (overflow-y:scroll). A container scrollable div is set to a specific height and a child div list is dynamically created at load time.
In the Android 3.1 device's Browser, the scrollable container div seems to clip scrollable content of long lists, only refreshing the overflow div with content as the user scrolls the un-rendered content into view. However, in the Android WebView, the scrollable div does not refresh and show more content when the the clipped content is scrolled into view.
Though other posts have suggested iScroll, I've found it quite sluggish when multiple scrollable divs are required on one HTML page for my test device (Galaxy Tab 10.1).
Example App Code:
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");
}
...
}
Example Overflow Div Page (index.html) - jQuery used to create random numbers for list:
<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>
Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
阿尔弗雷德，
谢谢你问这个。我们在 Android 3.2 上使用 PhoneGap 应用程序时遇到了同样的问题。
到目前为止，我们至少能够通过以下方式获得一些改进：（
您可以将其重新格式化为 jquery 样式，它应该可以工作，关键是三个目标操作。从我们对不同组合的所有测试来看，这似乎是是唯一有效的。）
这篇文章似乎最好地解释了正在发生的事情。
http://code.google.com/p/android/issues /detail?id=19827#hc16
我们尚未完成解决方案，因为在 touchmove 事件触发后滚动动量滚动得太远。到目前为止，升级到 4.1 似乎是一个不错的选择，当然，如果可能的话。在其他情况下，我们正在研究以下选项：
Alfred,
Thanks for asking this. We've had the same problem with a PhoneGap app on Android 3.2.
So far we've been able to get at least some improvement with the following:
(You can reformat this into a jquery style and it should work, the key are the three target actions. From all our testing of different combinations, this seems to be the only one that works.)
This article seems to best explain what's going on.
http://code.google.com/p/android/issues/detail?id=19827#hc16
We've yet to complete our solution as scrolling momentum scrolls too far after our touchmove event fires. Seems so far like upgrading to 4.1 may be a good option, when possible of course. In other cases we're looking into these options: