2012-02-15 34 views
7

次のコードでは、ユーザーがページの一番下までスクロールしたときに見つけようとしています。 JQueryモバイルで。JQuery Mobile User scroll to bottom

$(window).scroll(function(){ 
    if($(window).scrollTop() == $(document).height() - $(window).height()){ 
      alert("The Bottom"); 
    } 
}); 

今のところ、私はちょうど彼らが底に達したことを出力したいと思っています。

私の問題は、サイトが読み込まれると、このメッセージが出力されることです。下にスクロールすると、アラートが出力されます。

ページが読み込まれたときにそれをやりなおす方法はありますか?ユーザーが物理的にページをスクロールしたときにのみ行う方法はありますか?

ありがとうございました

答えて

7

あなたのコンテンツはあなたのページよりも短いですか?それがロードされるとき、あなたはすでに底にいるということを意味します。私はあなたの問題をここに複製しようとしましたhttp://jsfiddle.net/qESXR/2/それはあなたが好きなように動作します。しかし、コンテンツを短くしてローカルマシンで実行すると、同じ結果が得られます。
もしそうなら、あなたはこのように、これらの

$(window).height(); // returns height of browser viewport 

$(document).height(); // returns height of HTML document 

使用して、HTMLの高さ対ページの高さを確認することがあります

$(window).scroll(function(){ 
    if($(document).height() > $(window).height()) 
    { 
     if($(window).scrollTop() == $(document).height() - $(window).height()){ 
      alert("The Bottom"); 
     } 
    } 
}); 
+0

うんは、データが動的にロードされます。最初のロードは空ですが、データがDOMに挿入されると明らかに展開されます。 –

+0

コンテンツを読み込んだ後でスクロールを動的に追加する必要があるようです。もしそうなら、ここには良いリソースがありますhttp://stackoverflow.com/questions/4306387/jquery-add-and-remove-window-scrollfunction – davehale23

+0

ありがとう!これは私を狂ってしまった!! –

1

を問題は、jQueryのモバイルのpage widget扱いということである各「ページ」スクロールする限りウィンドウとして。ユーザーは、最後までスクロールしたときを検出するために、代わりに$(document)にスクロール機能をバインド:

http://jsfiddle.net/5x6T2/

$(document).scroll(function() { 
    if ($(window).scrollTop() + $(window).height() == $(document).height()) { 
     alert("Bottom reached!"); 
    } 
});