12

我正在尝试将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 是当今的两个主要框架，这应该是一个很常见的问题。

4

2 回答 2

12

我用你的代码玩了一下，找到了一些东西和一个解决方案，检查jsfiddle。

  • 由于您加载jQuery，请使用jQuery(document).ready().

  • 在的直接子元素上初始化iScroll似乎wrapper比在wrapper.

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

});​
于 2012-11-02T22:03:28.077 回答
1

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

myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });
于 2016-08-23T03:57:39.817 回答