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

#获取当前窗口的高度

document.documentElement.clientHeight

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

document.documentElement.scrollHeight

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

或者

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

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

最终效果:

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

												

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

  1. jQuery+Asp.net 实现简单的下拉加载更多功能

    原来做过的商城项目现在需要增加下拉加载的功能,简单的实现了一下.大概可以整理一下思路跟代码. 把需要下拉加载的内容进行转为JSON处理存在当前页面: <script type="tex ...

  2. 原生js实现简单的下拉刷新功能

    前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...

  3. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  4. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

  5. 手机网站下拉加载数据js(简单版)

    加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...

  6. mescroll.js简单的上拉加载、下拉刷新插件,带完整注释

    声明:本插件模仿自mescroll.js,随手所作,仅以注释提供思路,只实现了部分效果,且没有考虑兼容,有兴趣的朋友随意一看.api大家可参考mescroll.js API汇总一文. demo:点我下 ...

  7. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  8. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  9. 下拉加载dropload.js

    使用下拉加载 使用需要引用的css <link rel="stylesheet" href="../dist/dropload.css"> 使用需要 ...

随机推荐

  1. 7.Linux文件编辑之Vim

    1.VIM基本概述 1.什么是VIM? vi和vim是Linux下的一个文本编辑工具.(可以理解为windows的记事本,或word文档) 2.为什么要使用VIM? 因为Linux系统一切皆为文件,而 ...

  2. SpringBoot中如何优雅的读取yml配置文件?

    YAML是一种简洁的非标记语言,以数据为中心,使用空白.缩进.分行组织数据,从而使得表示更加简洁易读.本文介绍下YAML的语法和SpringBoot读取该类型配置文件的过程. 本文目录 一.YAML基 ...

  3. Java 异常(一)

    目录 异常简介 异常架构图 常见异常 异常分类 一:异常简介 Java异常是Java提供的一种识别及响应错误的一致性机制. Java异常机制可以使程序中异常处理代码和正常业务代码分离,保证程序代码更加 ...

  4. SpringBoot整合SSM(代码实现Demo)

    SpringBoot整合SSM 如图所示: 一.数据准备: 数据库文件:数据库名:saas-export,表名:ss_company 创建表语句: DROP TABLE IF EXISTS ss_co ...

  5. 陈莉君教授: 回望踏入Linux内核之旅

    本文系转载,著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者: 陈莉君 来源: 微信公众号linux阅码场(id: linuxdev) 初次踏入Linux 几多耕耘,几多收获 ...

  6. java和python对比

    一:解释性和编译型 梳理 编译型:源代码经过编译直接变为二进制的机器语言,每次都可以直接重新运行不需要翻译.典型的就是c语言. 解释性:java和python都是解释型,源代码经过编译变为字节码文件, ...

  7. SpringBoot整合Redis在可视化工具乱码问题,以及常用的api

     pom依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spr ...

  8. C# 倒计时,显示天,时,分,秒。时间可以是从数据库捞出来

    从数据库把时间读出来,接着 你用个timer控件启用控件,设置1000毫秒timer时间里 用当前时间-你取出的时间 就可以了 DateTime furtime = Convert.ToDateTim ...

  9. Apache Tomcat 远程代码执行漏洞(CVE-2019-0232)漏洞复现

    Apache Tomcat 远程代码执行漏洞(CVE-2019-0232)漏洞复现  一.     漏洞简介 漏洞编号和级别 CVE编号:CVE-2019-0232,危险级别:高危,CVSS分值:官方 ...

  10. [BZOJ2821][Luogu4135] 作诗

    由于BZOJ这题要contact lydsy2012@163.com,所以就放个洛谷的传送门(我木有BZOJ权限号啊0.0) 诶?这不是莫队裸题?? 等等--这题强制在线欸,没办法莫队了,肿么破? 之 ...