3

こんにちは、スクロールにiScrollを使用してモバイルweb.appを構築しています。問題は、ページが最初に読み込まれるときにiScrollスクローラーの動作に問題が発生することがあることです。

これは、問題を解決するために追加したコードであり、(document).readyほとんどの場合それを実行していますが、たまに機能しないようです。

ラッパー(スクロール可能な領域)の高さが遅くなると、スクローラーが機能しないと推測されます。そのためdocument.ready、上記の結果を追加しました。 https://stackoverflow.com/

<script type="text/javascript">

var myScroll;
$(document).ready(function loaded() {
    myScroll = new iScroll('wrapper');
});

$(document).ready.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

$(document).ready.addEventListener('DOMContentLoaded', loaded, false);

</script>`

助けていただければ幸いです。

ありがとうございました

4

5 に答える 5

1

$(document).ready();最初の呼び出しの後、あなたが持っているように呼ばれるべきではありません。

$(document).ready.addEventListener

また、3回目の呼び出しで上書きしようとしているようです。

次のことを試してください。

var myScroll;
$(document).ready(function {
    myScroll = new iScroll('wrapper');
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
});
于 2011-03-22T17:03:29.493 に答える
1
<script type="text/javascript">
    var myScroll;
    setTimeout(function() {
        myScroll = new iScroll('wrapper');
    }, 200);
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

iScrollを使用し、同じ状況にあるすべての人のために私たちが思いついた解決策です

于 2011-03-23T12:11:12.077 に答える
1

ready は、関数をパラメーターとして取り、ドキュメントの準備が整ったときに実行するメソッドです。だからあなたはすべきです:

$(document).ready(function(){
    //do stuff here
});
于 2011-03-22T18:48:19.147 に答える
0

jQuery を使用していると仮定すると、ドキュメントがロードされた後に iScroll を開始する必要があります。インライン JavaScript を使用しないことをお勧めしますが、どうしても必要な場合は < head > タグに次のように記述します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(function(){

$(document).bind('touchmove', function(e){
    e.preventDefault();
});
new iScroll('wrapper');
});

</script>

したがって、DOM がロードされるまで何も起こりません。他のすべての touchmove イベントをキャンセルしてから、iScroll 機能を div の「ラッパー」に追加します。

ラッパー div には、高さと幅を設定する必要があります。ラッパー内の最初の div はそうではありませんが、高さが設定されていない場合はフロートする必要があるため、ブラウザは高さを動的に計算できます。

于 2012-05-03T11:55:28.960 に答える
0

古いスレッドですが、現在これに取り組んでおり、.bind() が廃止されて .on() やその他の楽しいものになったので、2 セントを投じるかもしれないと思いました:

var myScroll;
var myScrollObjectID = "wrapper";
$(document).ready(function() {

    setTimeout(function() {
        myScroll = new iScroll(myScrollObjectID);
        console.log("iScroll object set: ", myScroll, myScrollObjectID);
    }, 200);

    $("#" + myScrollObjectID).on("touchmove", function(e){
          e.preventDefault();
          var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
          console.log('document->touchmove', e, touch);

    });  
    console.log("jQuery->document->ready");
});

確かに、「#wrapper」をバインドすると、iScroll オブジェクトによって制御されないヘッダーとフッターの touchmove イベントを処理する必要があるかもしれませんが、その場合は、3 つの div すべてから「body」でイベントをキャプチャします。 body オブジェクトにバブルアップする必要があります。

于 2013-04-03T15:21:23.860 に答える