Question

我正在尝试将jQuery Mobile与iScroll 4进行整合。我知道已经有一个project可以做到这一点，但是，由于带有输入元素的bug（在打字时页面跳得像疯了一样），我正在避免它。

我目前的实现如下：

http://jsfiddle.net/AqHsW/ - （JSFiddle示例） [Alternative mirror]

正如您可能已经注意到的，除了一个主要问题之外，这种方式完美无瑕： 无法向下滚动。此问题似乎是跨操作系统/浏览器。

但是，如果我覆盖onBeforeScrollStart方法：

var scroller = new iScroll('wrapper', { onBeforeScrollStart: null });

它的效果更好一些。现在可以滚动，但行为变得有毛病（同时响应速度慢），允许用户滚动他想要的高度等等。

（这样做似乎只会改变iOS上的内容）

我现在正在寻找这个问题的解决方案，它最好支持iOS 5和6，以及使用<input>元素。考虑到iScroll和jQuery Mobile是当今两个主导框架，这应该是一个非常普遍的问题。

Answer 1

我玩了一些代码，发现了一些事情和解决方案，请查看jsfiddle。

自您加载 jQuery 以来，请使用jQuery(document).ready()。
在wrapper的直接子元素而不是wrapper上初始化 iScroll 似乎更合适。
我没有通过CSS设置包装器高度，而是使用javascript更精确并避免溢出。
仅供参考，scroll已被定义为函数。 （在你的小提琴中，你使用scroll作为变量）
现在它就像一个魅力！

$(function(){

    var footerHeight = $('[data-role="footer"]').outerHeight(true),
        headerHeight = $('[data-role="header"]').outerHeight(true),
        padding = 15*2; //ui-content padding

   $('#wrapper, #scroller').height( $(window).innerHeight() - headerHeight - footerHeight - padding );

   // To make inputs focusable,
   // you can rebind their touchend's event to trigger their focus

   $('input').on('touchend', function(){
       $(this).focus();
   });

   var iScroller = new iScroll('scroller');

});

Answer 2

您可能会看到此演示：http://lab.cubiq.org/iscroll5/demos/event-passthrough/

myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });

jQuery mobile + iScroll，无法向下滚动

2 个答案: