jQuery Mobile的列表視圖不滾動android系統2.2.2

Question

我有一個jQuery Mobile的對話框如下記載：

<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> 

上行的內容必須是滾動的。在ios中。另外在Android 4+是。但在Android 2.2.2中，內容不會滾動。我曾嘗試加入：

data-scroll="true" 

不起作用。目前它沒有風格什麼那麼除了在這一分鐘的時間高度，當然，jQuery Mobile的「主題」，但我已刪除了這一點，它仍然不滾動：

.scroll{ 
    height:320px; 
    overflow: scroll; 

    } 

我做不明白爲什麼它不在Android 2.2.2中滾動。有沒有人知道這個問題，有一個解決方案或任何幫助，從來沒有？這讓我瘋狂。 ：/

Answer 1

看看http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Answer 2

3.0之前所有的Android版本竊聽具有溢出：滾動或自動（bug info）。

從克里斯巴爾的文章，在這裏使用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; 
     }); 
} 

，然後，如果使用的Modernizr：

if (Modernizr.touch) { 
    touchScroll($('.myScrollableContent')) 
} 

，但它的效果並不理想，因爲所有的觸摸能設備會有這個。

或者，如果你使用PhoneGap的，你可以做（​​PhoneGap的inited後某處）：

if (window.device && device.platform=="Android" && parseInt(device.version) < 3){ 
    touchScroll($('.myScrollableContent')) 
} 

Answer 3

這與Android < 3和iOS的問題< 5.

簡單的開始是增加overthrowjs和「推翻」類給你的可滾動內容。

然後你可以看看iscroll或其他polyfilers。