博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js如何实现上拉加载更多...
阅读量:6940 次
发布时间:2019-06-27

本文共 619 字,大约阅读时间需要 2 分钟。

我们在项目中经常使用到下拉加载更多,之前要么是底部写加载按钮,要么是引入插件。今天终于有时间手写一个了,之前感觉挺麻烦,明白原理后,其实很简单...

此图片来自于网络

scrollTop:滚动视窗的高度距离window顶部的距离,它会随着往上滚动而不断增加,初始值是0,它是一个变化的值;

clientHeight:它是一个定值,表示屏幕可是区域的高度;
scrollHeight:页面不能滚动时是不存在的,body长度超过window时才会出现,所表示body所有元素的长度,

由上面的三个值所产生一个原理公式:

scrollTop + clientHeight >= scrollHeight

let clientHeight  = document.documentElement.clientHeight; //浏览器高度    let scrollHeight = document.body.scrollHeight;    let scrollTop = document.documentElement.scrollTop;     let distance = 50;  //距离视窗还用50的时候,开始触发;    if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {        console.log("到底了,开始加载数据");    }

转载地址:http://tksnl.baihongyu.com/

你可能感兴趣的文章
PHP 图片加水印的方法
查看>>
javascript报错集锦
查看>>
koa2实现拦截器进行登录前session校验
查看>>
[java]窗口中的菜单项
查看>>
[ACM] hdu 2191 珍惜现在,感恩生活 (多重背包)
查看>>
python-并发编程之多进程
查看>>
JavaScript严格模式详解
查看>>
小X的佛光 NOIP模拟赛 倍增LCA 树结构
查看>>
The Himalayas (zoj 3809)
查看>>
[模板] 网络流相关/最大流ISAP/费用流zkw
查看>>
SCAU 10692 XYM-入门之道
查看>>
使用Ajax内容签名,减少流量浪费
查看>>
mysql 架构 ~异地容灾
查看>>
mui 上拉刷新加载template数据
查看>>
JavaScript中==比较时的过程
查看>>
HIDKomponente使用读写Hid设备一瞥
查看>>
gruntjs本地安装的流程
查看>>
mysql_real_escape_string
查看>>
elasticsearch配合mysql实现全文搜索
查看>>
Code Signal_练习题_depositProfit
查看>>