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

最新推荐文章于 2025-06-19 22:23:49 发布

刚刚觉醒的小菜鸡

最新推荐文章于 2025-06-19 22:23:49 发布

阅读量1.2k

点赞数 10

CC 4.0 BY-SA版权

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

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

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

实现原理

首先先了解几个属性

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

下拉刷新（触顶）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=devi

最低0.47元/天解锁文章

200万优质内容无限畅学