12

jQueryMobileをiScroll4と統合しようとしています。これを行うプロジェクトがすでにあることは承知していますが、input-elementsのバグ（入力時にページが狂ったようにジャンプする）のため、回避しています。

私の現在の実装は次のようになります。

http://jsfiddle.net/AqHsW/-（JSFiddleの例） [代替ミラー]

おそらくお気づきかもしれませんが、これは1つの主要な問題を除いて、問題 なく機能します。1つは下にスクロールできません。この問題はクロスOS/ブラウザのようです。

ただし、onBeforeScrollStartメソッドをオーバーライドすると、次のようになります。

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

それはやや良く機能します。これでスクロールできますが、動作がグリッチになり（応答性が遅くなります）、ユーザーは必要な高さまでスクロールできるようになります。

（ただし、これを行うとiOSの状況が変わるだけのようです）

<input>私は今、この問題の解決策を探しています。これは、要素の使用とともに、iOS5と6をサポートすることが望ましいです。iScrollとjQueryMobileが今日の2つの主要なフレームワークであることを考えると、これはかなり一般的な問題になるはずです。

4

2 に答える 2

12

私はあなたのコードで少し遊んで、いくつかのものと解決策を見つけました.jsfiddleをチェックしてください。

  • jQueryを読み込んでいるので、を利用してくださいjQuery(document).ready()。

  • ではなく、 の直接の子要素でiScrollを初期化する方が適切と思われます。wrapperwrapper

  • CSS を使用してラッパーの高さを設定する代わりに、javascript を使用してより正確にオーバーフローを回避しました。

  • 参考までscrollに、すでに関数として定義されていました。（変数として使用したフィドルで）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');

});​
于 2012-11-02T22:03:28.077 に答える
1

このデモを見ることができます: http://lab.cubiq.org/iscroll5/demos/event-passthrough/

myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });
于 2016-08-23T03:57:39.817 に答える