原生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. Kubernetes 系列(五):Prometheus监控框架简介

    由于容器化和微服务的大力发展,Kubernetes基本已经统一了容器管理方案,当我们使用Kubernetes来进行容器化管理的时候,全面监控Kubernetes也就成了我们第一个需要探索的问题.我们需 ...

  2. SpringBootSecurity学习(17)前后端分离版之 OAuth2.0 数据库(JDBC)存储客户端

    自动批准授权码 前面我们授权的流程中,第一步获取授权码的时候,都会经历一个授权是否同意页面: 这个流程就像第三方登录成功后,提问是否允许获取昵称和头像信息的页面一样,这个过程其实是可以自动同意的,需要 ...

  3. Scala 学习笔记之隐式参数和隐式转换并用

    隐式转换条件: 1. 当表达式类型与预期的类型不同时 2.当对象访问一个不存在的成员时 3.当对象调用某个方法,而该方法的参数声明与传入参数不相匹时. 隐式转换搜索范围: 1. 位于源火目标类型伴生对 ...

  4. JSON说明

    1. JSON 数据的书写格式 对象:是一个无序的“‘名称/值’对”集合.一个对象以“{”(左括号)开始,“}”(右括号)结束.每个“名称”后跟一个“:”(冒号):“‘名称/值’ 对”之间使用“,”( ...

  5. Hexo 博客快速整合公众号导流工具,不用互推也能实现粉丝躺增!

    readmore 插件简介 Hexo 整合 OpenWrite 平台的 readmore 插件,实现博客的每一篇文章自动增加阅读更多效果,关注公众号后方可解锁全站文章,从而实现博客流量导流到微信公众号 ...

  6. springboot结合jpa

    idea中新建springboot项目,引入spring-boot-starter-data-jpa依赖 application.yml中配置数据库连接,示例如下: spring: datasourc ...

  7. 从0开始学FreeRTOS-(列表&列表项)-6

    # FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在FreeRTOS中,列表与列表项使用得非常多,是Free ...

  8. 纯C语言写的按键驱动,将按键逻辑与按键处理事件分离~

    button drive 杰杰自己写的一个按键驱动,支持单双击.连按.长按:采用回调处理按键事件(自定义消抖时间),使用只需3步,创建按键,按键事件与回调处理函数链接映射,周期检查按键. 源码地址:h ...

  9. 开发 Django 博客文章阅读量统计功能

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 如何精确地记录一篇文章的阅读量是一个比较复杂的问题,不过对于我们的博客来说,没有必要 ...

  10. C#学习--Oracle数据库基本操作(连接、增、删、改、查)封装

    写在前面: SQLserver的C#封装:https://www.cnblogs.com/mexihq/p/11636785.html 类似于上篇有关SQLserver的C#封装,小编对Oracle数 ...