jQuery mobile + iScroll，无法向下滚动

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

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

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

Answer 2

我用你的代码玩了一下，找到了一些东西和一个解决方案，检查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');

});​