#获取当前滚动条的高度
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. Vue路由守卫（跳转页面置顶的处理方）
			
    在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...
    
			
    2. 
						
  2. 02jmeter-函数助手使用
			
    示例:__Random函数 1.打开函数助手,并按提示写入value 2.引用.复制出${__Random(1,99,gp)}放到需要引用的地方 3.请求成功后可通过debug sampler查看变量 ...
    
			
    3. 
						
  3. fullpage.js报如下错的解决办法
			
    控制台报错:fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey ...
    
			
    4. 
						
  4. 函数进阶(二) day13
			
    目录 昨日内容 闭包函数 装饰器 二层装饰器 装饰器模板 三层装饰器 今日内容 迭代器 可迭代对象 迭代器对象 for循环原理(迭代循环) 三元表达式 列表推导式 字典生成式 生成器 yield关键字 ...
    
			
    5. 
						
  5. 两行代码玩转SUMO！
			
    两行代码玩转SUMO! 这篇博客很简单,但是内容很丰富 如何生成如下所示的研究型路网结构? 只需要打开ubuntu终端输入如下代码即可,grid.number代表路口数量,grid.length代表路 ...
    
			
    6. 
						
  6. LeetCode刷题笔记（6）按照索引计算int[] 数组中的和（[Time Limit Exceeded]问题）
			
    Easy303 Easy633 package easy; public class e303 { private int[] sums; public e303(int[] nums) { sums ...
    
			
    7. 
						
  7. Spring Boot 2.X(十四)：日志功能 Logback
			
    Logback 简介 Logback 是由 SLF4J 作者开发的新一代日志框架,用于替代 log4j. 主要特点是效率更高,架构设计够通用,适用于不同的环境. Logback 分为三个模块:logb ...
    
			
    8. 
						
  8. python基础-字符串(str)类型及内置方法
			
    字符串-str 用途:多用于记录描述性的内容 定义方法: # 可用'','''''',"","""""" 都可以用于定义 ...
    
			
    9. 
						
  9. 字符logo存档
			
    在做项目的时候在源码开头加上一个自己的Logo就很爽,配合上标准的许可证声明之类的就可以让自己的代码看上去很专业.逼格很高-- 之前用topster.de的ASCII Generator搞过一点log ...
    
			
    10. 
						
  10. mysql中的锁机制之悲观锁和乐观锁
			
    1.悲观锁? 悲观锁顾名思义就是很悲观,悲观锁认为数据随时就有可能会被外界进行修改,所以悲观锁一上来就会把数据给加上锁.悲观锁一般都是依靠关系型数据库提供的锁机制,然而事实上关系型数据库中的行锁,表锁 ...
    
			
    11.