拖动滚动条实现网页内容自动加载代码实例

2023-12-04 13:32:28 前端笔记 183

本章节分享一段代码实例，它实现了向下拖动滚动条，能够自动加载网页内容的功能。

这种效果在很多网站都有应用，当然它们加载的内容都是从数据库读取的，下面的演示自然不能从数据库读取内容，不过原理大致如此，实际应用的时候只要和后台人员配合一下就可以实现了。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var range = 50;
  var elemt = 500;
  var maxnum = 20;
  var num = 1;
  var totalheight = 0;
  var main = $("#content");
  $(window).scroll(function(){
    var srollPos = $(window).scrollTop();
    totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
    if(($(document).height()-range) <= totalheight  && num != maxnum) {
      main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"
      +(num%20)+(num%20)+";height:"+elemt+"px' >hello world"+srollPos+"---"+num+"</div>");
      num++;
    }
  });
});
</script>
</head>
<body>
<div id="content" style="height:960px">
  <div id="follow">页面下拉自动加载内容</div>
  <div id="antzone"></div>
</div>
</body>
</html>

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

（1）.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。

（2）.var range = 50，规定距离下边界还有多少距离就要加载内容。

（3）.var elemt = 500，插入元素的高度。

（4）.var maxnum = 20，最多可以加载的数目。

（5）.var num = 1，声明一个变量并赋初值为1，用来表示加载元素的次序。

（6）.var totalheight = 0，后面会用到，用来存储一个高度。

（7）.var main = $("#content")，获取指定的元素jquery对象。

（8）.$(window).scroll(function(){})，为window对象注册scroll事件处理函数。

（9）.var srollPos = $(window).scrollTop()，获取浏览器向上滚动的尺寸。

（10）.totalheight = parseFloat($(window).height()) + parseFloat(srollPos)，获取客户浏览器客户区高度和向上滚动的高度之和。