スクロールバーページングの監視例を実装するjQueryスクロールイベントの詳細説明

この記事では主に、Ajax 読み込みを使用してスクロール バーのページングを監視する簡単な例の jQueryscrollevent の実装を紹介し、また、(document).height() と $(window).height( )、必要な友達は、

window オブジェクト

に適用できるscroll イベントを参照できますが、CSS overflow 属性がスクロールに設定されている iframe フレームや要素をスクロールすることもできます。

コードは次のとおりです:

$(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).scroll( function(){

$("#lb").text($(document).scrollTop());
})
95f3fae24dc7d737b86ff5101e6c2e5f54bdf357c58b8a65c66d7c19c8e4d114ebfca00fa643d9dbb53202ca757ec36f

以上がスクロールバーページングの監視例を実装するjQueryスクロールイベントの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。