jQuery mobile + iScroll，无法向下滚动。

Question

jQuery mobile + iScroll，无法向下滚动。

javascriptjqueryjquery-mobileiscroll4iscroll

12

我正试图将jQuery Mobile与iScroll 4集成。我知道已经有一个项目可以实现这一点，但由于输入元素bug问题（键入时页面会疯狂跳动），我要避免使用它。

我的当前实现看起来像这样： http://jsfiddle.net/AqHsW/ - (JSFiddle示例) [备用镜像]

如您可能注意到的那样，这个解决方案非常完美，除了一个主要的问题：无法向下滚动。这个问题似乎跨操作系统/浏览器存在。

然而，如果我覆盖onBeforeScrollStart方法：

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

它的工作效果有所提高。现在用户可以滚动，但行为变得不稳定（响应速度也很慢），使用户可以自由滚动等。

（然而，这样做似乎只会影响iOS）

我现在正在寻找解决这个问题的方法，最好支持iOS 5和6，并支持使用<input>元素。考虑到iScroll和jQuery Mobile是今天两个占主导地位的框架，这应该是一个相当普遍的问题。

- Zar

2个回答

1

您可以查看此演示：http://lab.cubiq.org/iscroll5/demos/event-passthrough/

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

- Sky Yip

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pierre · Accepted Answer

我稍微修改了你的代码，发现了一些问题并提供了解决方案，请查看jsfiddle。

由于你正在加载 jQuery，因此请使用jQuery(document).ready()。
在直接子元素上初始化 iScroll 比在wrapper上更为合适。
我使用javascript来设置wrapper的高度，以更加精确，避免溢出，而非通过CSS设置。
注意，scroll已经被定义为函数。 (在你的fiddle中，你将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');

});