android 瀏覽器 內容區 內嵌 scroll 不能滾動 這個問題困擾了我好一段時間。這個bug很久以前就有人提了。但是android2.x 估計沒戲解決了。4.x 這個問題不存在http://code.google.com/p/android/issues/detail?id=6864
今天花了4小時來研究。小有成果，在此記錄一下代碼：
t.php
================================================================
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
body {background:#fff}
.m1 {width:100%;height:300px;background:#f00;overflow:auto;}
.m2 {width:100%;background:#0f0;}
</style>
<script>
var atouch = {
"x":0,
"y":0,
"start":function(e){
e.preventDefault();
atouch.x = e.originalEvent.touches[0].clientX;
atouch.y = e.originalEvent.touches[0].clientY;
},
"move":function(e){
var x = e.originalEvent.touches[0].clientX;
var y = e.originalEvent.touches[0].clientY;
this.scrollLeft = this.scrollLeft + atouch.x - x;
this.scrollTop = this.scrollTop + atouch.y - y;
atouch.x = x;
atouch.y = y;
},
"init":function(id){
var ua = navigator.userAgent.toLowerCase();
var isa = ua.match(/android/i) == "android";
if(isa && $.browser.webkit && $.browser.safari && $.browser.version < 554 ){
$(id)
.bind('touchstart', atouch.start)
.bind('touchmove', atouch.move)
}
}
};
$(function(){
atouch.init("#m1");
msg = "";
for(s in $.browser){
msg += s + "=" + $.browser[s] + "<br>";
}
$("#msg").html(msg);
});
</script>
</head>
<body>
<div id="m1" class="m1">
<div class="m2" >
<?php for($i=0;$i<30;$i++){ ?>
<p><?php echo $i;?></p>
<?php }?>
</div>
</div>
<div id="msg">
</div>
</body>
</html>