拖动滚动条加载数据代码实例

快乐打工仔 分类:实例代码

此种效果应该不会陌生,比如本站的特效版块就是使用的类似效果,就是当向下拖动滚动条的时候,能够实时的加载相应的内容,这样的话可以节省带宽,没有必要加载全部的内容,而是根据需要进行加载,下面通过一个简单的实例介绍一下如何实现此效果。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>拖动滚动条加载数据代码实例-前端教程网</title>
<style type="text/css"> 
#father div { 
  font-size:100px; 
  background:#ccc; 
  margin-top:5px;
  text-align:center;
} 
#top{
  width:30px;
  height:1000px;
  background-color:green;
  margin:0px auto;
  text-align:center;
  color:red;
}
</style> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  var i=0;
  $(window).bind("scroll",function(event) { 
    var top=document.documentElement.scrollTop+document.body.scrollTop; 
    var textheight=$(document).height(); 
    if(textheight-top-$(window).height()<=100) { 
      if(i>=100) { 
        return; 
      } 
      i++; 
      $('<div>' + i + '</div>').appendTo($('#father')); 
    } 
  })
}) 
</script> 
</head> 
<body> 
<div id="top">前端教程网欢迎您,请向下拖动滚动条查看效果</div>
<form id="form1"> 
<div id="father"> 
</div> 
</form> 
</body> 
</html>

以上代码实现了我们想要的功能,当向下拖动滚动条的时候,能够实时的加载一些内容,当然在实际应用中,记载的内容一般都是从数据库读取的,这里只是演示一下实现过程。下面简单介绍一下如何实现此效果。

一.实现原理:

当向下拖动滚动条的时候,会触发scroll事件,进而执行注册的scroll事件处理函数,此函数可以判断网页底部被隐藏内容的高度,如果小于指定的高度值,就会向father元素中添加div元素,主要原理大体如此,具体可以参阅代码注释自行理解。

二.代码注释:

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

2.var i=0;,声明一个变量,将将变量的值赋值为0。

3.$(window).bind("scroll",function(){}),为窗口注册scroll事件处理函数。

4.var top=document.documentElement.scrollTop+document.body.scrollTop,可以获取网页向上滚动的尺寸,使用了兼容性写法。

5.var textheight=$(document).height(),获取网页的高度。

6.if(textheight-top-$(window).height()<=100){},网页的高度减去网页向上滚动的尺寸再减去窗口的高度,就是网页底部被隐藏的尺寸,如果这个值小于等于100,那么就会执行大括号中的代码。

7.if(i>=100){return},如果i的值大于等于100,就取消拖动加载内容的效果。

8.i++,每次加载都会使i的值加1。

9.$('<div>' + i + '</div>').appendTo($('#father')),向father元素中加载内容。

三.相关阅读:

1.scroll事件可以参阅jQuery scroll事件一章节。

2.height()函数可以参阅jQuery height()方法一章节。

3.appendTo()函数可以参阅jQuery appendTo()方法一章节。

4.document.documentElement.scrollTop参阅document.documentElement.scrollTop浏览器兼容 一章节。

拖动滚动条加载数据代码实例,这样的场景在实际项目中还是用的比较多的,关于拖动滚动条加载数据代码实例就介绍到这了。

拖动滚动条加载数据代码实例属于前端实例代码,有关更多实例代码大家可以查看

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容