13

私はiOSとAndroidのモバイルウェブサイトで最も素晴らしいjavascriptツールiScroll4http : //cubiq.org/iscroll-4を使用しています。私のレイアウトは次のようになります。

レイアウトの問題

水平方向にスクロール可能な領域は、次の設定でiScroll4を使用しています。

   var myScroll = new iScroll('frame',  { hScrollbar: false, vScrollbar: false, vScroll: false })

水平スクロール部分はうまく機能します。この問題は、ユーザーが水平スクロール領域に指を置いてページを上下にスクロールしようとしたときに発生します。そのため、同じ領域でネイティブの垂直スクロールとiScrollの水平スクロールが必要です。

私がこれまでに試したこと：iScrollコードでe.preventDefault（）を削除します（ネイティブスクロールは可能ですが、両方の軸で可能です）。e.preventDefault（）を削除してから、次の方法でページ全体の水平スクロールを無効にします。

var touchMove;

document.ontouchstart = function(e){
    touchMove = e.touches[0];
}

document.ontouchmove = function(e){
    var theTouch = e.touches[0] || e.changedTouches[0];
    var Xer      = rs(touchMove.pageX - theTouch.pageX).toPos();
    var Yer      = rs(touchMove.pageY - theTouch.pageY).toPos();        
    touchMove    = theTouch;
    if(Yer > Xer){ e.preventDefault(); }
}

何もしないようです。iScrollの水平スクロールを失うことなく、水平スクロール領域でネイティブの垂直スクロールを許可するにはどうすればよいですか？私はここで本当に困惑しています。前もって感謝します。

（レコードの場合、rs（foo）.toPos（）は、値に関係なくfooを正の数にする関数です）。

4

7 に答える 7

12

コアをハッキングせずに、またiScrollからswipeviewに変更せずに、Fresheyeballで説明されている効果を実現したい場合は、iScroll4でイベントリスナーを操作できます。

myScroll = new iScroll('scrollpanel', {
    // other options go here...
    vScroll: false,
    onBeforeScrollMove: function ( e ) {
        if ( this.absDistX > (this.absDistY + 5 ) ) {
            // user is scrolling the x axis, so prevent the browsers' native scrolling
            e.preventDefault();
        } else {
            // delegate the scrolling to window object
        window.scrollBy( 0, -this.distY );
    }
    },
});

そうすることで、onBeforeScrollMove-Handlerはスクロール方向が水平に見えるかどうかをチェックし、デフォルトのハンドラーを防ぎ、スクロールアクションをX軸に効果的にロックします（コメントアウトしてみてください。違いがわかります）。それ以外の場合、スクロール方向を垂直にする必要がある場合は、window.scrollBy()メソッドを使用してブラウザーをスクロールさせます。これは完全にネイティブではありませんが、問題なく機能します。

お役に立てば幸い

Lukx

[編集]使用しなかった私の元の解決策は、window.scrollBy()遅いサムスンの電話では機能しませんでした。そのため、答えを調整する必要がありました。

于 2012-05-18T07:52:43.163 に答える
10

@Lukxの優れたソリューションの編集を提案しました。iScroll4の新しいバージョンは、オーバーライドできる場所e.preventDefault()を配置します。onBeforeScrollMoveifブロックをこのオプションに配置することにより、垂直スクロールのデフォルトが妨げられることはなく、垂直はネイティブにスクロールできます。

myScroll = new iScroll('scrollpanel', {
    // other options go here...
    vScroll: false,
    onBeforeScrollStart: function ( e ) {
        if ( this.absDistX > (this.absDistY + 5 ) ) {
            // user is scrolling the x axis, so prevent the browsers' native scrolling
            e.preventDefault();
        }
    },
});
于 2012-10-30T19:55:24.843 に答える
4

iscroll 5をeventPassthrough: true使用すると、これを実現するように設定できます。http://iscrolljs.com/#configuringを参照してください

于 2014-09-18T01:56:14.430 に答える
1

古い答え

UPDATE特別なプラグインは、この問題に対処するためだけに作成されています：http: //cubiq.org/swipeview

私は方法を発見しました！

ドキュメントの先頭に変数を追加します。Androidが15で、iOSが3の場合

 var scrollTolerance = ( rs().isDevice('android') )?15:3;

元のe.preventDefault（）;を無効にします。スクロール用。これはonBeforeScrollStartの下にあります：

すぐ下のin_move

 timestamp = e.timeStamp || Date.now();

この行を追加します

if( Math.sqrt(deltaX*deltaX) > scrollTolerance){e.preventDefault();}

これが行うことは次のとおりです。scrollToleranceは、ご想像のとおり、指の方向の許容範囲を設定します。ネイティブスクロールを上下させるために完全な垂直角度を要求したくありません。また、iOSは正しく検出されず、何らかの理由で4を超えることはないため、3を使用しました。次に、iScrollの標準e.preventDefault（）を無効にします。これにより、2つスクロール可能な領域でのネイティブの垂直スクロールが防止されます。次に、e.preventDefault（）;を挿入します。移動時のみ、許容範囲からの指の方向に基づきます。

これは完全には機能しません。ただし、許容範囲であり、iOSとAndroidで動作します。誰かがより良い方法を見たら、ここに投稿してください。これは私が（そして他の人が）定期的に使用する必要があるものであり、完璧な固溶体が必要です。

ありがとう。

于 2011-11-18T06:42:07.910 に答える
0

Adamからこのソリューションをテストしてください。 https://gist.github.com/hotmeteor/2231984

秘訣はonBeforeScrollMoveにチェックインを追加することだと思います。最初にonBeforeScrollTouchStartで最初のタッチ位置を取得し、次にonBeforeScrollMoveで新しい位置を確認してから、違いに基づいて必要なスクロールを無効にします。

于 2013-10-09T06:55:59.040 に答える
0

iScroll 5は、任意の軸のネイティブスクロールをサポートしています。

http://iscrolljs.com/

于 2014-03-20T15:30:09.877 に答える
0

iScroll5では、eventPassthrougtをtrueに設定するだけです。それはそれを修正します。

于 2017-09-19T19:40:36.187 に答える