iScroll滾動問題

我想用一堆文本字段實現一個簡單的頁面並使用iscroll滾動。iScroll滾動問題

問題是當我點擊文本框時，鍵盤出現，但我無法滾動到屏幕底部或屏幕頂部。

這是代碼。任何有關這方面的幫助非常感謝。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <!-- Change this if you want to allow scaling --> 
    <meta name="viewport" content="width=default-width; user-scalable=no" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>sample</title> 
    <!-- iPad/iPhone specific css below, add after your main css > 
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> 
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> 
    --> 
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> 
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
    <script type="text/javascript" charset="utf-8">  
    // If you want to prevent dragging, uncomment this section 
    /* function preventBehavior(e) 
     { 
      e.preventDefault(); 
     }  
     document.addEventListener("touchmove", preventBehavior, false);*/ 

     function onBodyLoad() 
     { 
      document.addEventListener("deviceready",onDeviceReady,false); 
     }  

     /* When this function is called, PhoneGap has been initialized and is ready to roll */ 
     function onDeviceReady() 
     { 
      // do your thing! 
     } 
    </script> 
    <link rel="stylesheet" type="text/css" href="scrollbar.css"> 
    <script type="application/javascript" src="src/iscroll.js?v4"></script>  
    <script type="text/javascript"> 
     var myScroll; 

     function loaded() { 
      myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' }); 
     } 

     document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
     document.addEventListener('DOMContentLoaded', loaded, false); 
    </script> 
    <style type="text/css" media="all"> 
     body,ul,li { 
      padding:0; 
      margin:0; 
      border:0; 
     }  
     body { 
      font-size:12px; 
      -webkit-user-select:none; 
      -webkit-text-size-adjust:none; 
      font-family:helvetica; 
     } 
     #header { 
      position:absolute; 
      top:0; 
      left:0; 
      width:100%; 
      height:45px; 
      line-height:45px; 
      background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); 
      padding:0; 
      color:#eee; 
      font-size:20px; 
      text-align:center; 
     } 
     #header a { 
      color:#f3f3f3; 
      text-decoration:none; 
      font-weight:bold; 
      text-shadow:0 -1px 0 rgba(0,0,0,0.5); 
     } 
     #footer { 
      position:absolute; 
      bottom:0; 
      left:0; 
      width:100%; 
      height:48px; 
      background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); 
      padding:0; 
      border-top:1px solid #444; 
     } 
     #wrapper { 
      position:absolute; 
      z-index:1; 
      top:45px; 
      bottom:48px; 
      left:0; 
      width:100%; 
      background:#aaa; 
      overflow:auto; 
     } 
     #scroller { 
      position:relative; 
      /*-webkit-touch-callout:none;*/  
      -webkit-tap-highlight-color:rgba(0,0,0,0); 
      float:left; 
      width:100%; 
      padding:0; 
     } 
     #scroller ul { 
      position:relative; 
      list-style:none; 
      padding:0; 
      margin:0; 
      width:100%; 
      text-align:left; 
     } 
     #scroller li { 
      padding:0 10px; 
      height:40px; 
      line-height:40px; 
      border-bottom:1px solid #ccc; 
      border-top:1px solid #fff; 
      background-color:#fafafa; 
      font-size:14px; 
     } 
     #scroller li > a { 
      display:block; 
     }  
    </style>  
</head> 
<body> 
    <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div> 
    <div id="wrapper"> 
     <div id="scroller"> 
      <ul id="thelist"> 
       <li><input></li> 
       <li><input></li> 
       <li><input></li> 
       <li><input></li> 
       <li><input></li> 
       <li><input></li> 
       <li><input></li> 
       <li><input></li> 
       <li><input></li> 
       <li><input></li> 
       <li><input></li> 
      </ul> 
     </div> 
    </div>  
    <div id="footer"></div> 
</body> 
</html>

來源

2011-05-27 user773688