原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~

好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数据。那么只要我们对滚动监听即可。

现在,让我们来看代码:

window.onscroll = function () {
var scrollH = document.documentElement.scrollHeight;// 文档的完整高度
var scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 当前滚动条的垂直偏移
var screenH = window.screen.height; // 屏幕可视高度
if ((scrollH - scrollT - screenH) < 5) { //5只是一个相对值,可以让页面再接近底面的时候就开始请求
// 执行请求
}
};

温馨提醒:做好防抖以及判断没有数据的情况。

原生js实现上拉加载的更多相关文章

  1. js_原生js实现上拉加载更多的功能。

    1.人生啊,是我莽撞了啊.这是我公司一个喜欢读书的女孩子的个性签名,喜欢哪些句子,不悲伤,却切切实实的令人喜好. 2.写程序是一件很直接明了的事情,明白了就是明白了,不懂就是不懂,不懂装懂的会让你走很 ...

  2. dropload.js(上拉加载插件使用过程中遇到的坑)

    dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...

  3. js实现上拉加载思路整理

    1.整体模拟滚动 监听touchmove事件,比较 scrollTop 和 $scroller.scrollHeight() - $container.height(). 缺点:滑动不流畅, tran ...

  4. (效果一)js实现上拉加载

    实现思路:获取滚动元素的高度,滚动条距离顶部的距离,滚动条的高度, 算式:可视窗口的高度 + 滚动条距离顶部的距离 == 滚动条的高度就说明到底部. HTML <!doctype html> ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. 【前端】上拉加载更多dropload.min.js的使用

    代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...

  7. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  8. zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  9. js上拉加载、下拉刷新的插件

    之前在网上找那种下拉刷新,上拉加载的插件,有一款IScroll,但是用起来太麻烦,于是就自己写了款,但依赖于jquery.js,bug肯定有,希望评论提出. js: /* 简洁的下拉刷新,上拉加载插件 ...

随机推荐

  1. redis列表底层实现之一——链表

    注意标题中的“之一”,那么什么情况下,列表会使用链表作为其数据结构呢? 答案就是——列表键包含了大量的元素,或者列表中包含的元素都是比较长的字符串. Ok,由于链表大家都比较熟悉,接下来就直接给出链表 ...

  2. ArcGIS Server服务扩展SOE应用场景

    何时需要使用SOE? 用自己的业务逻辑扩展ArcGIS Server • 分析超越了即拿即用的GP工具 • 功能超越了Esri Web APIS中包含的内容 • 通过其他方式细粒度的ArcObject ...

  3. CSS动画,2D和3D模块

    CSS3提供了丰富的动画类属性,使我们可以不通过flash甚至JavaScript,就能实现很多动态的效果.它们主要分为三大类:transform(变换),transition(过渡),animati ...

  4. .net Core 发布服务

    .net core 发布服务 准备好的文件可以通过下面的几个命令进行操作 1.创建Service sc create "服务名" binPath= "文件路径+文件名&q ...

  5. .NET LINQ分析AWS ELB日志避免996

    前言 小明是个单纯的.NET开发,一天大哥叫住他,安排了一项任务: "小明,分析一下我们超牛逼网站上个月的所有AWS ELB流量日志,这些日志保存在AWS S3上,你分析下,看哪个API的响 ...

  6. ZGC深入学习

    ZGC简介 本次调研目标选取的是jdk11(long-term support)下首次亮相的zgc. zgc介绍简单翻译了zgc main page:ZGC简介 另外参考hotspot garbage ...

  7. MySQL优化与实践

    一.MySQL优化概括 二.SQL优化 实践: 1.查看是否开启了慢查询日志 show variables like 'slow_query_log' 没有开启 2.查看是否开启了未使用索引SQL记录 ...

  8. Docker 学习入门

    一.Docker 简介 1.什么是 Docker Docker 是使用最广泛的开源容器引擎,它彻底释放了计算虚拟化的威力,极大提高了应用的运行效率,降低了云计算资源供应的成本! 使用 Docker,可 ...

  9. 怎么将ETL技术落地

    ETL概述 ETL(Extraction-Transformation-Loading)是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到 ...

  10. (20)ASP.NET Core EF创建模型(必需属性和可选属性、最大长度、并发标记、阴影属性)

    1.必需和可选属性 如果实体属性可以包含null,则将其视为可选.如果属性的有效值不可以包含null,则将其视为必需属性.映射到关系数据库架构时,必需的属性将创建为不可为null的列,而可选属性则创建 ...