#获取当前滚动条的高度
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. Https工作流程图
			
    
			
    2. 
						
  2. C# WPF基础巩固
			
    时间如流水,只能流去不流回. 学历代表你的过去,能力代表你的现在,学习能力代表你的将来. 学无止境,精益求精. 一.写作目的 做C# WPF开发,无论是工作中即将使用,还是只应付跳槽面试,开发基础是非 ...
    
			
    3. 
						
  3. 日天老师的django相关博客
			
    Yuan先生的博客网址 1 Web应用 https://www.cnblogs.com/yuanchenqi/articles/8869302.html 2 http协议 https://www.cn ...
    
			
    4. 
						
  4. python中根据时间获取周数，通过周数获取时间
			
    # 时间## 时间和周数 import time import datetime # 获取今天是第几周 print(time.strftime('%W')) # 获取当前是周几(0-6,0代表周一)  ...
    
			
    5. 
						
  5. 设计模式（一）Iterator模式
			
    Iterator模式用于在数据集合中按照顺序遍历集合.即迭代器模式. 下面来看一段实现了迭代器模式的示例程序. 这段程序的作用是将书(Book)放置到书架(BookShelf)中,并将书的名字按顺序显 ...
    
			
    6. 
						
  6. Docker安装方法整理
			
    目录 安装准备 在线安装 离线安装 Raspbian便捷脚本安装 卸载 安装准备: 卸载旧版本 较旧版本的Docker被称为docker或docker-engine.如果已安装,请卸载它们: sudo ...
    
			
    7. 
						
  7. .Net Core WebApi（三）在Linux服务器上部署
			
    鸽了好久,终于有个时间继续写了,继上一篇之后,又写(水)了一篇,有什么不足之处请大家指出,多谢各位了. 下面有两个需要用到的软件,putty和pscp,我已经上传到博客园了,下载请点击这里. 一.准备 ...
    
			
    8. 
						
  8. Java设计模式：23种设计模式
			
    1. 软件设计模式概述 2. GoF 的 23 种设计模式的分类和功能 3. UML中的类图及类图之间的关系 4. 开闭原则——面向对象设计原则 5. 里氏替换原则——面向对象设计原则 6. 依赖倒置 ...
    
			
    9. 
						
  9. 永恒之蓝复现（win7/2008）
			
    Kali对Windows2008/7的MS17010漏洞测试(MSF自带模块) 0x01 说明 其实这个MSF自带的exp模块还是挺让人伤脑筋的,因为它支持的OS并不是很多,也就Windows Ser ...
    
			
    10. 
						
  10. [2018-06-28] django项目 实例
			
    实例一.显示一个基本的字符串在网页中 首先先进入views.py def home(request): string = u'随便写' return render(request, 'home.htm ...
    
			
    11.