jQuery mobile + iScroll,无法向下滚动

Question

我正在尝试将jQuery Mobile与iScroll 4集成.我知道已经有一个项目可以做到这一点,但是,由于输入元素的错误(在打字时页面跳得像疯了),我正在避免它.

我目前的实现如下:

http://jsfiddle.net/AqHsW/ -(JSFiddle示例) [替代镜像 ]

正如你可能已经注意到的那样,除了一个主要问题之外,这个工作完美无瑕: 一个人无法向下滚动.这个问题似乎是跨操作系统/浏览器.

但是,如果我的覆盖onBeforeScrollStart方法:

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

它的效果要好一些.现在可以滚动,但行为变得很脆弱(同时响应速度慢),允许用户滚动他想要的高度等等.

(这样做似乎只会改变iOS上的内容)

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

Answer 1

我玩了一些你的代码,找到了一些东西和解决方案,检查jsfiddle.

• 由于你加载jQuery,使用jQuery(document).ready().

• 在你的直接子元素上初始化iScroll似乎更合适.wrapperwrapper

• 我没有通过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');

});?