Jquery Mobile Listview在android 2.2.2中不可滚动

时间:2012-09-19 10:40:31

标签: android css html5 cordova jquery-mobile

我有一个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>

ul内容需要可滚动。在ios它是。 Android 4+也是。但在Android 2.2.2中,内容不会滚动。我试过添加:

data-scroll="true"

不起作用。除了这个时间点的高度之外,没有什么样的风格,当然还有jquery移动'主题',但是我删除了它,它仍然不滚动:

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

    }

我不明白为什么它不在Android 2.2.2中滚动。有谁知道这个问题,有解决方案或任何帮助,所以有史以来?这让我疯狂。 :/

3 个答案:

答案 0 :(得分:1)

答案 1 :(得分:0)

3.0之前的所有Android版本都会出现溢出:滚动或自动(bug info)。

来自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;
      });
}

然后如果使用modernizr:

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

但这并不理想,因为所有可触摸的设备都会有这个。

或者,如果您使用Phonegap,您可以(在电话间隙之后的某个地方):

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

答案 2 :(得分:0)

这是android&lt;的一个问题3和ios&lt; 5.

简单的开始是为您的可滚动内容添加“推翻”和“推翻”类。

然后你可以查看iscroll或其他polyfilers。