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>