js完成 web页面的转动条下拉时加载更多

在手机上，数据列表的分页都是下拉到底部的时刻会加载更多，然则，客岁三月份的时刻遇到了客户要求web页面也要下拉加载更多的需求，因而根据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) {
                
        });
}

然则，本日测试职员发明，当浏览器缩放了或许屏幕显现设置缩放时，就不能下拉加载了。时隔一年多，真是惊人@_@

经由调试，发明是有缩放时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 }能够处理。

代码

var totalPages;//总页数
var pageno = 0;//当前页数
var C = 10;//转动条间隔底部的间隔
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue >= -C) {
           //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) {
                
        });
}

相干参考

web页面在转动条下拉时加载更多内容（个人项目履历）
下拉加载更多DEMO(js完成)
$(window).scroll(function()监听转动事宜不实行