JavaScript实现上拉加载，下拉刷新

刚刚觉醒的小菜鸡

于 2024-03-10 22:25:49 发布

阅读量1.2k

点赞数 10

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/wang1664178416/article/details/136610723

版权

本文介绍了移动端中常见的上拉加载和下拉刷新的实现原理，通过scrollTop、clientHeight和scrollHeight属性判断是否触底或触顶，并提供了简单的JavaScript示例。同时提到在实际开发中通常会使用现成库如vue-scroller来简化实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两种交互方式一般出现在移动端中，而且一般采用调库的方式

实现原理

首先先了解几个属性

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("开始加载数据");
}