18

iScroll4を使用していますが、うまく機能しています。

これは、iScroll の初期化、更新、および終了に使用する関数です。

function iniciarIscroll(){
    /*En ie7 no lo usamos*/
    if(!ie7){
        $(document).ready(function() {
            myScroll1 = new iScroll('nvl1');
            myScroll2 =new iScroll('nvl2');
            /*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);*/
        });
    }
    return false;
}

function refrescarIscroll(){
    if(!ie7){
        myScroll1.refresh();
        myScroll2.refresh();
    }
    return false;
}


function terminarIscroll(){
    if(!ie7){
        myScroll1.destroy();
        myScroll1 = null;
        myScroll2.destroy();
        myScroll2 = null;
    }
    return false;
}

問題は、クリックできないことです（<a>または<input>フォーカスされているかどうかはわかりません）。css :hover または :focus も適用されません。しかし、それはJavaScriptのようなイベントを発生させます

.hover() or .click()

可能であれば、これを解決する方法はありますか？

4

9 に答える 9

20

iscroll のローダーで次の変更を行うだけです。

この行を変更します。

myScroll = new iScroll('wrapper');

このため：

myScroll = new iScroll('wrapper', {
useTransform: true,
zoom: 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();
}
});
于 2012-10-18T23:20:32.493 に答える
10

著者は、フォームの互換性に問題があるとコメントしています。これは既知の問題であり、次のバージョンの修正に取り組んでいます。他の誰かがフォーラムでコメントしています:

v4.1.9 の時点で、フォーム フィールドのサポートはまだ開発中です。ラジオ ボタンとチェックボックスをラベルでラップすることで機能させることができます (ラップは for="" 構文を使用するよりもうまく機能するようです)。

リンクは問題なく、提供されているデモで機能するはずです。e.preventDefault()通常の犯人である init スクリプトで呼び出しをコメントアウトしました。フォームの互換性の問題がリンクにも影響しているのではないでしょうか?

ホバーイベントに関しては、私が知る限り、これは要素がタップされたときにアクティブになるはずです。

それが少し役立つことを願っています。最悪のシナリオ - コードを廃棄して、プロジェクトのデモ ページから始め、一度に 1 行ずつニーズに合わせてテストを続けます。どの変更が意図した動作を壊しているかがすぐにわかります。

于 2011-12-04T22:03:42.153 に答える
2

私が使用した回避策の1つは、ユーザーが編集できるようにするときにiscrollを「フリーズ」することです。iScrollの入力との非互換性は、スクローラーのコンテンツに適用されるタッチサポートと組み合わせたcss変換に関連しています。スクローラーを一時的に無効にすると、ユーザーが値を入力できるようになります。秘訣は、無効にしてもコンテンツの現在のスクロール位置が保持されるようにすることです。「凍結」すると、ユーザーは表示領域内の入力を更新できます。欠点は、この状態の間、スクローラーがスクロールしないことです。あるイベントでは解凍する必要があります。

これを機能させるために、これらの関数をiScroll.prototypeに追加しました。

_get_current_scroll_px: function (transformStyle) {
    //return the first string that looks like an integer, that should be the x translation
    return /[\-0-9]+px/.exec(transformStyle)[0];
},


freeze: function () {
    this.disable();
    this.savedStyle = this.scroller.style[vendor + 'Transform'];
    this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller
    this.scroller.style[vendor + 'Transform'] = '';
},

thaw: function () {
    this.scroller.style[vendor + 'Transform'] = this.savedStyle;
    this.scroller.style['marginLeft'] = '0';
    this.enable();
}

呼び出しまたはフリーズすると、次のようになります。

//user triggered event causes freeze
yourFreezeEventCallback: function () { 
    myScroll1.freeze();
    //now user can use visible inputs on screen
}

解凍すると次のようになります。

//user triggered event causes thaw
yourThawEventCallback: function () { 
    myScroll1.thaw();
    //now scrolling is back and inputs can no longer be edited or in focus
}

明らかに、これを何らかの方法で自分のプロジェクトに統合する必要がありますが、それは私にとってはうまくいきました。理想的ではないので、iScrollのアップデートを楽しみにしています。警告：これはIEでテストされていないため、保証しません。これが、少なくとも回避策を講じるのに役立つスタートになることを願っています。

于 2011-12-06T19:15:06.517 に答える
2

iScroll を初めて発見したとき、私はこれが私の多くの問題の解決策だと思っていました。それから、この問題は私に大きな時間を与えました。回避策を見つけようとしているときに、このプルリクエストを思いつきました。

プルリクエストには、別のより良い解決策が見つかったというメモがありますが、どのプルリクエストが問題を修正する/修正することになっていたかはわかりません。そのメモの著者から詳細な情報を入手できるかどうかを確認します.

更新: 関連するプル リクエストはこちらにあります。まだテストする機会がありません (Android のサポートについては、今日中に確認したいと思っています)。

于 2011-12-09T21:45:35.030 に答える
0

また、モバイル環境でスムーズにスクロールできるようにする作業も行っており、iscrollは適切なツールを探す際に検討したライブラリの1つでした。他の回答では、特定の問題を解決する方法が提案されていますが、実際には、スクロール可能性（Joe Hewittによる）またはtouchscroll（David Aurelioによる）のいずれかを使用することをお勧めします。スクロール可能性は実際に最高の感触を提供すると思いますが、実際には行われておらず、同じまたは同様の問題に直面することになります。私は自分のプロジェクトに個人的にtouchscrollを使用しているので、それをお勧めします。

数週間前にプロジェクトでiscrollを試していたときに、カスタムクリックアクションとタイムアウトチェックを入力する必要がありました。これは、タッチの開始時にe.preventDefault（）をコメントアウトし、独自の関数をいくつか挿入することで行いました。実際にスクロールするときにキャッチします。基本的に、これらのライブラリはすべて同じように機能します（イベントをキャッチして防止し、css変換を実行して、DOMを再描画するアニメーションよりもスムーズにし、発生する必要のあるイベントを人為的に発生させます）。つまり、修正できるもう1つの方法は、特定の要素のクリックのイベントがいつ発生するかを見つけて、コード内で手動で起動することです。touchscrollでは、最上部の要素でイベントをリッスンするため、バブリングを停止するだけで動作を上書きできます...iscrollが同じことを行うかどうかは思い出せません。

これ（スムーズ、ネイティブ感、モバイルでのアニメーション）はまださまざまなテクノロジーの最先端にある分野であるため、完全なソリューションをまだ持っている人は誰もいません。数年以内にモバイルが改善され、モバイルブラウザがスクロールイベントをネイティブに処理できるようになると思いますが、それまでは、このようなソリューションを一緒にハックする必要があります。幸運を！

于 2011-12-10T08:47:31.403 に答える