#获取当前滚动条的高度
document.documentElement.scrollTop

#获取当前窗口的高度

document.documentElement.clientHeight

#获取当前整个文档的高度

document.documentElement.scrollHeight

添加滚动事件，当滚动条高度+窗口高度=文档高度

或者

当滚动条高度+窗口高度>=文档高度-20px时，触发加载，

创建div元素，从列表中依次拿出数据写入div元素内

最终效果：

每次向下滚动都会加载新的元素。

												


											
原生js实现简单的下拉加载的更多相关文章
	

    
								
  1. jQuery+Asp.net 实现简单的下拉加载更多功能
		
    原来做过的商城项目现在需要增加下拉加载的功能,简单的实现了一下.大概可以整理一下思路跟代码. 把需要下拉加载的内容进行转为JSON处理存在当前页面: <script type="tex ...
    
		
    2. 
						
  2. 原生js实现简单的下拉刷新功能
		
    前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
    
		
    3. 
						
  3. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
		
    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
    
		
    4. 
						
  4. 原生JS下拉加载插件分享。
		
    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
    
		
    5. 
						
  5. 手机网站下拉加载数据js(简单版)
		
    加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...
    
		
    6. 
						
  6. mescroll.js简单的上拉加载、下拉刷新插件，带完整注释
		
    声明:本插件模仿自mescroll.js,随手所作,仅以注释提供思路,只实现了部分效果,且没有考虑兼容,有兴趣的朋友随意一看.api大家可参考mescroll.js API汇总一文. demo:点我下 ...
    
		
    7. 
						
  7. iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战
		
    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
    
		
    8. 
						
  8. 下拉加载更多DEMO(js实现)
		
    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...
    
		
    9. 
						
  9. 下拉加载dropload.js
		
    使用下拉加载 使用需要引用的css <link rel="stylesheet" href="../dist/dropload.css"> 使用需要 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Flink Connector 深度解析
			
    作者介绍:董亭亭,快手大数据架构实时计算引擎团队负责人.目前负责 Flink 引擎在快手内的研发.应用以及周边子系统建设.2013 年毕业于大连理工大学,曾就职于奇虎 360.58 集团.主要研究领域 ...
    
			
    2. 
						
  2. MS08-067 远程执行代码 漏洞复现
			
    漏洞编号:MS08-067 披露日期: 2008/10/22 受影响的操作系统:Windows 2000;XP;Server 2003;Server 2008;   目标系统 Microsoft(R) ...
    
			
    3. 
						
  3. django2-创建项目
			
    方式一:cmd或linux命令行下创建django项目(不常用,此处不做详细介绍) django-admin.py startproject autotest 方式二:使用pycharm专业版创建dj ...
    
			
    4. 
						
  4. Java 异常处理的 20 个最佳实践，你知道几个？
			
    异常处理是 Java 开发中的一个重要部分,是为了处理任何错误状况,比如资源不可访问,非法输入,空输入等等.Java 提供了几个异常处理特性,以try,catch 和 finally 关键字的形式内建 ...
    
			
    5. 
						
  5. ESP8266开发之旅 基础篇① 走进ESP8266的世界
			
    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
    
			
    6. 
						
  6. 百万年薪python之路  --   函数初始练习
			
    1.整理函数相关知识点 2.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def func(lst): lst = lst[1::2] return l ...
    
			
    7. 
						
  7. 简易数据分析 13 | Web Scraper 抓取二级页面
			
    这是简易数据分析系列的第 13 篇文章. 不知不觉,web scraper 系列教程我已经写了 10 篇了,这 10 篇内容,基本上覆盖了 Web Scraper 大部分功能.今天的内容算这个系列的最 ...
    
			
    8. 
						
  8. vue实现rsa加密，数字签名,md5加密等
			
    一.使用jsencrypt进行rsa加密 原文链接:Js参数RSA加密传输,jsencrypt.js的使用 - CSDN博客 *(原文处有一个地方不对,不需要转换+,rsa已经做过base64转码了) ...
    
			
    9. 
						
  9. 基于redis解决session分布式一致性问题
			
    1.session是什么 当用户在前端发起请求时,服务器会为当前用户建立一个session,服务器将sessionId回写给客户端,只要用户浏览器不关闭,再次请求服务器时,将sessionId传给服务 ...
    
			
    10. 
						
  10. Java基础（三十四）String、StringBuffer类和数据缓冲区Buffer类
			
    一.String类 1.创建字符串对象 创建字符串对象有两种方法:直接用“=”或者使用“new String(...)” String aStr = "TMZ"; String b ...
    
			
    11.