#获取当前滚动条的高度
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. 第三方软件 pcanywhere提权
			
    pcanywhere 是一个远程管理软件 1.访问pcanywhere默认安装目录 访问 下载打开 利用破解工具直接 选择刚刚下载的软件 点破解 拿到用户密码后去百度下载客户端让后连接
    
			
    2. 
						
  2. docker-以安装软件的方式介绍docker部分命令的使用
			
    [root@ipha-dev71- docker]# docker search python # 搜索镜像 [root@ipha-dev71- docker]# docker pull centos ...
    
			
    3. 
						
  3. 07 python学习笔记-写一个清理日志的小程序（七）
			
    #删掉三天前的日志 #1.获取到所有的日志文件, os.walk #2.获取文件时间 android 2019-09-27 log,并转成时间戳 #3.获取3天前的时间 time.time() - 6 ...
    
			
    4. 
						
  4. MYSQL DATE_FORMAT参数列表及用法
			
    MYSQL DATE_FORMAT参数列表及用法 主要涉及用法 DATE_SUB(DATE, INTERVAL EXPR TYPE) DATE_FORMAT(DATE,FORMAT) REPLACE( ...
    
			
    5. 
						
  5. OptimalSolution(2)--二叉树问题（2）BST、BBT、BSBT
			
    一.判断二叉树是否为平衡二叉树(时间复杂度O(N)) 平衡二叉树就是:要么是一棵空树,要么任何一个节点的左右子树高度差的绝对值不超过1. 解法:整个过程为二叉树的后序遍历.对任何一个节点node来说, ...
    
			
    6. 
						
  6. 修改vuex状态机中的数据
			
    vuex状态机中的数据是必须提交mutation来修改,如果现实开发中,我们需要修改,而又不想提交mutaition,应该怎么做呢?   先来回顾一下场景,有一个列表是存在vuex中的   这个列表展 ...
    
			
    7. 
						
  7. MongoDB Java API操作很全的整理
			
    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写,一般生产上建议以共享分片的形式来部署. 但是MongoDB官方也提供了其它语言的客户端操作API.如下图所示: 提供了C.C++ ...
    
			
    8. 
						
  8. 如何使用git上传代码
			
    首先在github 上创建好远程仓库,并拷贝仓库地址,接下来按照以下步骤:   1.打开命令行进入要上传的文件目录,初始化 git init  2. 建立远程仓库,git remote add ori ...
    
			
    9. 
						
  9. 适用于Windows桌面应用程序的.NET Core 3
			
    介绍 9月,微软发布了新版.NET Core,用于构建Windows桌面应用程序,包括WPF和Windows Forms.从那时起开发人员可以将传统的nfx桌面应用程序(和控件库)迁移到.NET Co ...
    
			
    10. 
						
  10. 数据存储之非关系型数据库存储----MongoDB存储
			
    MongoDB存储----文档型数据库 利用pymongo连接MongoDB import pymongo client = pymongo.MongoClient(host='localhost', ...
    
			
    11.