ホームページ  >  記事  >  ウェブフロントエンド  >  スクロールバーのページング監視の例を実装するための jQuery スクロールイベント

スクロールバーのページング監視の例を実装するための jQuery スクロールイベント

高洛峰
高洛峰オリジナル
2017-01-11 09:44:511294ブラウズ

スクロール イベントはウィンドウ オブジェクトで機能しますが、CSS オーバーフロー プロパティをスクロールに設定して 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 ()のときだけ取得する必要があります。一番下までスクロールしたことがわかります

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

実験してみると自分でわかります

$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->

jQueryの詳細についてはスクロール イベントの監視を実装するスクロール バーのページネーションの例と関連記事については、PHP 中国語 Web サイトに注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。