jQuery scrollイベント実装モニタスクロールバーページング例

scrollイベントはwindowオブジェクトに適用されますが、iframeフレームワークとCSS overflowプロパティをscrollの要素に設定することもできます.

 
  
$(document).ready(function () { //         
  
    $(window).scroll(function () { 
  
        //$(window).scrollTop()                
  
        //$(window).height()          
  
        //$(document).height()          
  
        var bot = 50; //bot         
  
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) { 
  
           //       +     〉=     -      ； 
  
            //             
  
            $.getJSON("url", { page: "2" }, function (str) { alert(str); }); 
  
        } 
  
    }); 
  
}); 
 

注意:(window).Height()と(document).Height()の違い
jQuery(window).Height()は現在の可視領域の大きさを表し、jQuery(document)である.Height()は、ドキュメント全体の高さを表す、具体的な状況に応じて使用する.
注意ブラウザのウィンドウサイズが変更する場合(例えば、ウィンドウを最大化または拡大した後)jQuery(window).Height()は変化するがjQuery(document).height()は変わらない.

 
   
  
$(document).scrollTop()                                   
$(document).scrollLeft()             
 
   
 

トップを取得するにはscrollTop()=0を取得するだけでトップになります
下端を取得するにはscrollTop()>=$(document)を取得する.height()-$(window).height()は端までスクロールしていることがわかります

 
  
$(document).height()  //           
  
$(window).height()  //                                                   document                   
  
 
 

自分で実験をすればわかる

 
  
$(document).scroll(function(){ 
  
    $("#lb").text($(document).scrollTop()); 
  
})