我有一个Jquery移动对话框,如下所示:
<div data-role="dialog" id="styles" data-theme="a">
<div data-role="header" class="header">
<h1>Styles</h1>
</div>
<!-- /header -->
<div data-role="content" data-scroll="true" data-theme="a">
<div class="scroll">
<ul data-role="listview" id="mylist">
</ul>
</div>
</div>
<!-- /content -->
<div data-role="footer" class="footermodal">
<h1>↕ Please Scroll ↕</h1>
</div>
<!-- /footer -->
</div>
ul 内容需要可滚动。在ios中是这样。同样在安卓4+是。但在Android 2.2.2中,内容不会滚动。我尝试添加:
data-scroll="true"
不行。除了此时此刻的高度之外,它没有任何风格,当然还有jquery移动"主题",但是我已经删除了它,它仍然无法滚动:
.scroll{
height:320px;
overflow: scroll;
}
我不明白为什么它不在 Android 2.2.2 中滚动。有谁知道这个问题,有解决方案或任何帮助吗?它让我发疯。:/
http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/
所有 3.0 之前的 android 版本都带有溢出:滚动或自动(错误信息)的错误。
从Chris Barr的文章以及使用jQuery的人中,这里有一个快速修复:
function touchScroll(selector){
var scrollStartPos = 0;
$(selector).live('touchstart', function(event) {
event.preventDefault();
scrollStartPos = this.scrollTop + event.originalEvent.touches[0].pageY;
});
$(selector).live('touchmove', function(event) {
event.preventDefault();
this.scrollTop = scrollStartPos - event.originalEvent.touches[0].pageY;
});
}
然后如果使用现代化:
if (Modernizr.touch) {
touchScroll($('.myScrollableContent'))
}
但这并不理想,因为所有可触摸设备都有这个。
或者,如果您使用Phonegap,则可以执行此操作(在Phonegap启动后的某个地方):
if (window.device && device.platform=="Android" && parseInt(device.version) < 3){
touchScroll($('.myScrollableContent'))
}
android <3 和 ios <5 的问题。
简单的开始是将 overthrowjs 和"overthrow"类添加到可滚动内容中。
然后,您可以查看iscroll或其他polyfilers。