原生js实现简单的下拉加载
#获取当前滚动条的高度
document.documentElement.scrollTop

#获取当前窗口的高度
document.documentElement.clientHeight

#获取当前整个文档的高度
document.documentElement.scrollHeight

添加滚动事件,当滚动条高度+窗口高度=文档高度
或者
当滚动条高度+窗口高度>=文档高度-20px时,触发加载,
创建div元素,从列表中依次拿出数据写入div元素内

最终效果:

每次向下滚动都会加载新的元素。
原生js实现简单的下拉加载的更多相关文章
- jQuery+Asp.net 实现简单的下拉加载更多功能
原来做过的商城项目现在需要增加下拉加载的功能,简单的实现了一下.大概可以整理一下思路跟代码. 把需要下拉加载的内容进行转为JSON处理存在当前页面: <script type="tex ...
- 原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- 原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
- 手机网站下拉加载数据js(简单版)
加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...
- mescroll.js简单的上拉加载、下拉刷新插件,带完整注释
声明:本插件模仿自mescroll.js,随手所作,仅以注释提供思路,只实现了部分效果,且没有考虑兼容,有兴趣的朋友随意一看.api大家可参考mescroll.js API汇总一文. demo:点我下 ...
- iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- 下拉加载更多DEMO(js实现)
项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...
- 下拉加载dropload.js
使用下拉加载 使用需要引用的css <link rel="stylesheet" href="../dist/dropload.css"> 使用需要 ...
随机推荐
- python里怎么查看数据类型
python里怎么查看数据类型? python里可以通过type()函数来查看数据类型. Python 内置函数 Python 内置函数 Python type() 函数如果你只有第一个参数则返回对象 ...
- django1-环境搭建
我的环境:win10 + pycharm2019.1.3 + python3.6.5 + Django2.1.10 安装django cmd下执行:pip install django==2.1.10 ...
- 玩转u8g2 OLED库 MAX7219_32X8点阵模块
u8g2 OLED库 + MAX7219_32X8点阵模块 理论基础 玩转u8g2 OLED库,一篇就够 玩转u8g2 OLED库,一篇就够(字数太多 要分篇) 实验内容 Full screen bu ...
- Nginx初学(一)安装与运行
1.下载nginx安装包 nginx-1.6.3.tar.gz并复制安装包到 /usr/local/software中 2.安装依赖包,命令如下: yum -y install gcc-c++(需要等 ...
- Django中ORM的优化
1. exists( ) 什么时候用 count( ) 和 len( )什么时候合适, 用values( )或values_list( )只取需要的列的数据 iterator()对数据对象生成迭代器, ...
- (一) kinect概述
Kinect可以进行身体节点定位,姿势定位,人脸识别等功能,在此先做简单介绍,后续主要介绍插件的应用,毕竟自己开发识别过程太消耗时间. (注1:Kinect官方虽然提供了Unity的APi,但是方便起 ...
- java常用类 比较器/system/math/big
Java 比较器 自然排序:java.lang.Comparable 定制排序:java.util.Comparator 自然排序:java.lang.Comparable Comparable接口 ...
- VB.NET 与 SAP RFC连接问题点
与SAP RFC连接,电脑上必须要安装SAP软件,否则会报错ActiveX 输入工单号,无法带出SAP内接口RFC信息. 确认原因为:RFC接口需求的工单参数需要在前面加两位00,例如:1000541 ...
- Unity4-用户输入
Input是一个类,可以接收用户的输入 使用AddComponentMenu("Demo1/InputTest1"),将脚本加入到工程中. //例子: void Update() ...
- 和35岁刘阿姨一起自测 Python 流程控制基本功
0.突然降临的困惑 流程控制语句.布尔值.布尔值操作符都属于 python 的基础功.大好周末我写这篇笔记,不是为了整理这些基础知识点,而是记录几个令我突然迷惑的代码段.--代码本身很简单,但即便已经 ...