Я создал приложение для Android 3.1 Tablet, работающее на Samsung Galaxy Tab 10.1, которое отображает приложение HTML5 в WebView с использованием прокручиваемых элементов div (overflow-y:scroll). Элемент div с возможностью прокрутки контейнера установлен на определенную высоту, а список дочерних элементов div динамически создается во время загрузки.
В браузере устройства Android 3.1 прокручиваемый контейнерный контейнер, кажется, обрезает прокручиваемый контент длинных списков, обновляя только переполненный div с контентом, когда пользователь прокручивает не визуализированный контент в поле зрения. Однако в Android WebView прокручиваемый элемент div не обновляет и отображает больше контента, когда обрезанный контент прокручивается в представление.
Несмотря на то, что другие посты предлагали iScroll, я обнаружил, что он довольно медленный, когда для моего тестового устройства требуется несколько прокручиваемых элементов div на одной странице HTML (Galaxy Tab 10.1).
Пример кода приложения:
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>
Заранее спасибо.