スクロールバーが引き下げられたときにjsでより多くのページを読み込む方法（コードが添付されています）

この記事の内容は、スクロールバーがプルダウンされたときにより多くのページを読み込むためのjsの実装方法に関するものです（コード付き）。必要な友人が参考になれば幸いです。 。

携帯電話では、データリストのページを一番下にプルダウンすると読み込みが多くなりますが、昨年3月にWebページもプルダウンして読み込みを増やしてほしいというお客様のご要望をいただきました。スクロール バーがプルダウンされたときに、さらにコンテンツを読み込みます (個人的なプロジェクトの経験) この記事のコードは、次のとおりです:

var totalPages;//总页数
var pageno = 0;//当前页数
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue == 0) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert('没有更多了');
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分页列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

ただし、今日は、テスターが確認したところ、ブラウザがズームされている場合、または画面表示がズームに設定されている場合、ダウンロードできないことがわかりました。 1 年以上経って、本当にすごいです@_@

デバッグ後、ズーム時に positionValue の値を 0 にすることができず、それ以上読み込み続けることができないことがわかりました。記事「ドロップダウンの読み込み詳細デモ (js 実装)」で述べたように、次のことを確認しました。 positionValue的值就无法等于0了，没法继续加载更多了，这时看到一篇文章下拉加载更多DEMO(js实现)中讲到：

如果等滚动条拉到底部时再加载，会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源，这时需要时间。一个更佳的方式是，当滚动条距离底部一定距离（C）时，就动态加载更多，向服务端请求资源。也就是预加载，预读取。公式如下
this.scrollHeight - C == $(this).scrollTop() + $(this).height()

看完后收到启发，于是将positionValue的值设为大于等于-10，这里的10也就是滚动条距离底部一定距离（C）的值。
果然，没问题了，有缩放时也可以正常实现下拉加载。

于是，记录下来，分享给大家，共勉。

另外提醒一点，$(window).scroll(function()监听滚动事件不执行这个问题中的采纳答案提到：

html,body的高度样式如果设置为100%，$(window).scroll方法将检测不到正确的滚出高度（0），导致滚动监听事件失效，设置html,body{ height:auto } 読み込み前にスクロール バーが一番下に達するまで待つと、ユーザー エクスペリエンスに影響します。一般に、動的にロードする場合はサーバーにリソースを要求する必要があり、時間がかかります。より良い方法は、スクロール バーが下から一定の距離 (C) にあるときに、動的にさらに読み込み、サーバーにリソースを要求することです。つまり、プリロードとプリリードです。式は以下の通りです

this.scrollHeight - C == $(this).scrollTop() + $(this).height()

これを読んでインスピレーションを得たので、positionValueの値をそれ以上に設定しました-10 まで、ここでは 10 つまり、スクロール バーと下部の間の一定の距離 (C) の値です。

案の定、問題ありません。ズーム中でもプルダウン読み込みは正常に実行できます。

だから、記録してみんなで共有して、励まし合いましょう。 別の注意点、$(window).scroll(function() はスクロール イベントをリッスンし、実行されません。この質問で採用された回答は次のように述べられています:
html、本文の高さのスタイルが 100% に設定されている場合、$(window) .scroll メソッドは正しいスクロールの高さ (0) を検出しないため、スクロール リスニング イベントが失敗します。html,body{ height:auto} を設定すると解決できます。関連する推奨事項:

jQuery は下にスクロールしてコンテンツを瞬時にロードし、ウォーターフォール フロー効果を実現します。jQuery は下にスクロールして

🎜🎜js をスクロール バーを実装してページの一番下までスクロールし、loading_javascript を続行します。スキル🎜🎜🎜

以上がスクロールバーが引き下げられたときにjsでより多くのページを読み込む方法（コードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。