2

Android 2.2以降、Blackberry 9以降、iOS4以降を対象としたモバイルアプリを作成しています。スタックでは、Phonegap、jQuery、iScroll（とりわけ）を使用しています。

私たちのアプリ画面の1つは次のようになります（匿名性のためにテキストが編集されています）-iOS5シミュレーターのSafariで実行されています。

アプリのスクリーンショット

ご覧のとおり、これは固定ヘッダーと、パディングの少ないデバイス画面全体に広がる複数のブロックレベルのフォーム要素を備えた典型的な入力画面です。

前述したように、私たちのアプリはiScrollを使用しています。このページでは、次のコード（iScrollの「フォーム」サンプルから取得）を使用して初期化しています。

// ...

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);

// ...

この画面では、ユーザーが背景のいずれかの部分に触れるとコンテンツが正常にスクロールしますが、入力要素の1つに触れてスクロールジェスチャ（上下にスワイプ）を開始するとコンテンツはスクロールしないことに気付きました。あなたが理解できるように、これは本質的にこの画面を使用することを不可能にするので、私は修正を探しています。

それ以来、iScrollで犯人の行を見つけました。

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

（iscroll.jsの179）、このバグの未解決の問題であり、修正が要求され、1つのプルリクエストで修正が要求されますが、バグの作成者の行番号が正しくないため、修正を試みることができません。上記のプルリクエストは私には機能しません（iOS 5.1、Android 4.0.4でテスト済み）。

私の質問-ユーザーが入力要素に触れたときに（iScrollを使用して）スクロールできるようにする方法はありますか？そうでなければ、このような場合、iScrollは完全に役に立たない。現時点では、私はどちらかを見ています

  • iScrollと同じ機能を備えていると主張するOverthrowシムを使用しますが、Androidのさまざまな 問題 があるため、これは優れたオプションではありません。これは、主要なプラットフォームの1つです。
  • iScrollを廃止し、固定ヘッダーを失います。

2012年です-モバイルブラウザでこれを行う方法はまだありませんか？！？

4

5 に答える 5

1

このチケットは少し古いと思いますが、同じ問題を扱っているときに遭遇しました。iOSでiScrollv4を使用しています。

iScrollオブジェクトを設定するときに以下を追加するこの解決策（どこか）を見つけました：

        myScroll = 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();
                }
            }
        });

ただし、このコードには2つの問題があります。

a）useTransformは、このページ（http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip- ）のように、「きれいなグラフィック」ボタンを表示するためにラジオボタンを自動的に非表示にしていたフォームのレイアウトを壊しました。 easy-css3-checkboxes-and-radio-buttons /）。なぜこれがそのレイアウトを壊すのかわかりません、そしておそらくそれは私が別の方法で修正することができた部分的な関係にすぎませんでしたが...私はuseTransformをコメントアウトしましたそしてそれはそれを修正しました...

b）仮想キーボードを引き上げた入力の場合、キーボードが非表示になった後、ページは「上にスクロール」（ヘッダーが画面から外れ、フッターが下から約1/4上）のままだったので、「onBlur」イベントを「rescroll」に追加しました。ウィンドウとそれはうまくいったようでした...これが私の最終的な解決策です。

    myScroll = 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();
            } else {
                $(target).bind('blur', function(){
                    window.scrollTo(0,0);
                    myScroll.refresh();
                });
            }
        }
    });

お役に立てれば！！！

于 2013-04-21T20:49:55.370 に答える
0

PreventDefault（）を削除します。

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') {

            // remove this code right here:
            e.preventDefault();
        }
    }
});
于 2012-10-11T23:00:52.063 に答える
0

私はまったく同じ問題を抱えていて、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は私には適切な数値のように思われます）、フィールドはフォーカスを取得しません。それ以外の場合は取得します。

詳細が必要な場合はお知らせください。

于 2012-11-13T11:48:39.113 に答える
0

java-scriptとiscrollのハックなしで、ここで答えます

https://stackoverflow.com/a/17390516/1458628

于 2013-06-30T12:51:38.260 に答える
0

私はそれを完全に解決しました。iscroll.jsを使用している場合は、iscroll.jsファイルを編集することで簡単に解決できます。

_move（e）関数の定義を編集しました。_move（e）の関数定義に次のコードが表示されます。ここにコードを入力してください

that.moved = true;
   that._pos(newX, newY);
   that.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
that.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
if (timestamp - that.startTime > 300) {
   that.startTime = timestamp;
   that.startX = that.x;
   that.startY = that.y;
}
if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);

//上記のコードをelse条件で囲みます。そして、if条件は以下でなければなりません：

enter code here
if (e.srcElement.localName == 'textarea') {
  var scrollHeight = e.srcElement.scrollHeight;
  var scrollTop = e.srcElement.scrollTop;
  if (scrollTop >= 0 && screenTop <= scrollHeight) {
       that.dirY = that.dirY * 5;
       e.srcElement.scrollTop = scrollTop + that.dirY;
  }
}

//iPadでテスト済み。私にとってはうまくいきます。

于 2015-12-18T07:04:18.967 に答える