滚动条到底自动加载数据

时间 2019-11-09

标签滚动条到底自动加载数据繁體版

原文原文链接

以前Google的图片搜索结果界面提供了一个功能，即滚动条滚动到接近底部的位置自动加载剩余图片。我的以为这个功能还蛮人性化的，避免来回翻页的繁琐，让搜索结果以增量形式展示。因此也本身仿造了一个。功能是基于JQuery的。

下面是代码。

$(window).scroll(function() { var o = $('#pincontainer'); // 并非全部页面都要执行加载操做。
        // 你也能够选择别的识别条件。
    if(o!=null && o.length !=0){ //获取网页的完整高度(fix)
      var hght= window.scrollHeight; //获取浏览器高度(fix)
      var clientHeight =window.clientHeight; //获取网页滚过的高度(dynamic)
      var top= window.pageYOffset || (document.compatMode == 'CSS1Compat' ? document.documentElement.scrollTop : document.body.scrollTop); //当 top+clientHeight = scrollHeight的时候就说明到底儿了
      if(top>=(parseInt(hght)-clientHeight)){ show(); } } }); //我所要执行的操做是把ajax取得的数据塞到目标div中
  function show(){ var target = $('#pincontainer'); if(!target){return false;} //通常你都要记录一下你的数据的录入状态，好比到当前显示页码
    var current_page = parseInt(target.attr('index')); //还要记录一个最大显示页码，以阻止请求溢出
    var max_page = parseInt(target.attr('maxPages')); if(current_page >= max_page){ return false; } var data={}; data.nextPage = parseInt(current_page)+1; var currentHref = window.location; // 有的时候可能还要从url中读取参数，我使用正则式
    var tcaStr = new RegExp("(^|)tca=([^\&]*)(\&|$)","gi").exec(currentHref); if(tcaStr) data.tca = tcaStr[2]; var scaStr = new RegExp("(^|)sca=([^\&]*)(\&|$)","gi").exec(currentHref); if(scaStr) data.sca = scaStr[2]; var tagStr = new RegExp("(^|)tag=([^\&]*)(\&|$)","gi").exec(currentHref); if(tagStr) data.tag = tagStr[2]; // ajax请求数据
 jQuery.ajax({ type:"POST", url: "/show/getPins/", data:data, dataType: "json", beforeSend: function(XMLHttpRequest){ $("#loading").css('display',''); }, success:function(response) { if(response.data){ for(var i=0, length = response.data.length; i<length; i++){ var html = response.data[i]; var test = $(html); target.append(test); var img = test.find('img'); X.util.flowPin(img[0],188); } target.attr('index',parseInt(current_page)+1); $("#loading").css('display','none'); } }, error:function(){ alert("加载失败"); } }); return false; }

这个功能的一个关键成败点是scrollTop的计算。刚开始我只使用了document.body.scrollTop，可是这个数值在chrome中一直显示0，因而有了上面的多浏览器兼容计算方法。javascript

        //获取网页滚过的高度(dynamic)
      var top= window.pageYOffset || (document.compatMode == 'CSS1Compat' ? document.documentElement.scrollTop : document.body.scrollTop);

改进：考虑到有些用户并不喜欢自动加载的功能，能够在页面上添加“取消自动加载”的按钮，换以按钮控制。css

 
另外一个参考：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>jQuery实现当拉动滚动条到底部加载数据</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var totalheight = 0; 

function loadData()
{ 
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 

    if ($(document).height() <= totalheight) 
    { 
        //加载数据
        $("#container").append($(document).scrollTop()+"<br/>");
    } 
} 

$(window).scroll( function() { 
    console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop()); 
    console.log("页面的文档高度 ："+$(document).height());
    console.log('浏览器的高度：'+$(window).height());
    loadData();
}); 
</script>
</head>
<body>
    <div id="container">
        dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
    </div>
</body>
</html>