javascript - iScroll 4不在输入元素上滚动

我正在构建针对Android 2.2 +，Blackberry 9+和iOS 4+的移动应用程序。在我们的堆栈中，我们使用Phonegap，jQuery和iScroll(以及其他)。

我们的应用程序屏幕之一如下所示(为匿名起见，文本已删除)-在iOS 5模拟器的Safari中运行。

如您所见，这是一个典型的输入屏幕，具有固定的标题，并且多个块级表单元素扩展了整个设备屏幕，减少了填充。

如前所述，我们的应用程序使用iScroll。我们正在使用以下代码在此页面上对其进行初始化(摘自iScroll'forms'示例)。

// ...

window.scroller = new iScroll(id, {
    useTransform: false,
    onBeforeScrollStart: function(e) {
        var target = e.target;
        while (target.nodeType != 1) target = target.parentNode;
        if(target.tagName != 'select'
            && target.tagName != 'input'
            && target.tagName != 'textarea') {
            e.preventDefault();
        }
    }
});

// Disable touch scrolling (Req'd for iScroll)
window.document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, false);

// ...

在此屏幕上，我注意到，当用户触摸背景的任何部分时，内容滚动良好，但是当您通过触摸输入元素之一开始滚动手势(向上或向下滑动)时，内容不会滚动。如您所知，这实际上使该屏幕无法使用，因此我需要寻求修复。

从那以后，我在iScroll中找到了罪魁祸首。

if (nodeName == "TEXTAREA" || nodeName == "INPUT" || nodeName == "SELECT" ) return;

(在iscroll.js中为179)，一个具有声明的修复程序的open issue for this bug和一个pull request that claims to fix it，但是该错误的作者似乎行号不正确，导致我无法尝试该修复程序，并且上述请求请求对我不起作用(在iOS 5.1，Android 4.0.4上测试)。

我的问题-有什么方法可以允许用户在触摸输入元素时滚动(使用iScroll)？如果没有，在这种情况下，iScroll完全没有用。此刻，我正在寻找

使用声称与iScroll具有相同功能的Overthrow shim-但是，由于various issues with Android(我们的主要平台之一)，所以这不是一个好选择。

放弃使用iScroll并失去固定的标头。

是2012年-我们仍然没有办法在移动浏览器上做到这一点吗？!

最佳答案

我遇到了完全相同的问题，并在设置iScroll时使用了以下内容:

var ISCROLL_MOVE;

var ISCROLL_MOVE_LIMIT=10;

// ... functions to include when you set up your iScroll
onScrollStart: function(e) {
                ISCROLL_MOVE=0;
            },
            onScrollMove: function(e) {
                ISCROLL_MOVE_LIMIT++;
            }

然后，当您的iScroll中有任何表单元素时，例如:

var selectField = document.getElementById('mySelectField');

selectField.addEventListener('touchend' /*'mousedown'*/, function(e) {

        if (SCROLL_MOVE<SCROLL_MOVE_LIMIT)
            this.focus();

    }, false);

请注意，该操作是在触摸结束事件上进行的，它允许在用户触摸表单元素时滚动iScroll页面-基本上，它测量用户正在进行的滚动量(或不滚动)(SCROLL_MOVE的量)。如果它大于10(对我来说SCROLL_MOVE_LIMIT似乎是个好数字)，则该字段将不会吸引焦点，否则它将成为焦点。

让我知道您是否需要更多细节。

关于javascript - iScroll 4不在输入元素上滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12849747/