android - Jquery Mobile Listview 在 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 ↕&lt;/h1>             
        </div>
        <!-- /footer -->    

    </div>

ul 内容需要可滚动。在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 版本都存在溢出漏洞：滚动或自动（错误信息）。

来自 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，您可以执行以下操作（在 phonegap 启动后的某处）：

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

Answer 3

这是 android < 3 和 ios < 5 的问题。

简单的开始是将 overthrowjs 和“overthrow”类添加到您的可滚动内容中。

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