滚动条的触底加载(原生和Vue三种实现过程)
更新时间：2026年06月24日 09:13:21 作者：满脑子技术的前端工程师
这段文章详细介绍了滚动条触底加载的实现原理及代码示例,涵盖原生JS和Vue框架的应用,帮助开发者更高效地地实现触底加载功能
滚动条的触底加载
提示：
今天后端同学有遇到关于滚动条触底加载的问题，他使用的是element-UI中的一个无限滚动（个人尝试使用了一下，感觉很垃圾，不推荐使用）
就手写了一个原生JS的方法，以前有做过类似的功能，有点忘却了，正好借这个机会,重新回顾一下!!!!!!!!!!!!!!!!!!!!!!!!!!!)
触底加载的原理
1.原理如下所示
1.我这里采用的是: 页面被卷去的高度+可视的Dom高度(视口的高度,如下图所示)>=滚动条的长度
2 视口的高度+页面被卷去的高度=滚动条的长度 (这样理解会不会更简单一些)
2.代码如下所示
//对应的Api各个部分对应的Api如下 页面被卷去的高度: window.scrollY || window.pageYOffset || document.documentElement.scrollTop
视口的高度：
document.documentElement.clientHeight
滚动条的长度：
document.documentElement.scrollHeight || document.body.scrollHeight
（以上的Api都是在谷歌浏览器中使用的，其他的浏览器可能有一些不兼容，所以自己可以测试一下）
触底下载代码如下
1.原生JS实现触底加载
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 3000px;
margin: 0 auto;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
<script>
// 浏览器触底加载功能的实现
/* 1.视口的高度+页面被卷去的高度=滚动条的长度 */
window.addEventListener("scroll",function(){
//页面被卷去的高度: window.scrollY
//页面被卷去的高度: window.pageYOffset
//页面被卷去的高度: document.documentElement.scrollTop
// console.log("页面被卷去的高度:",window.scrollY,window.pageYOffset,document.documentElement.scrollTop);
// body页面的滚动条高度: document.body.scrollHeight
// 整个页面你的滚动条高度: document.documentElement.scrollHeight
// console.log(document.body.scrollHeight,document.documentElement.scrollHeight);
// 可视页面的高度: document.documentElement.clientHeight
// console.log(document.documentElement.clientHeight);
if(document.documentElement.clientHeight+window.scrollY>=document.documentElement.scrollHeight){
console.log("触底了!!!!");
}
})
</script>
</html>2.在Vue中如何使用
1.只需要在产生滚动条的页面中注册Scroll的事件
2.如果不想要该【触底加载】功能，可以在组件 销毁的生命周期里面把 Scroll 的注册事件移除
想要公用的话，就可以自己去封装一个事件，通过参数导入的形式，进行注册和注销
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-router history模式服务器端配置过程记录
vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于vue-router history模式服务器端配置的相关资料,需要的朋友可以参考下2021-06-06
代码优化不仅仅局限在业务逻辑这块，像是代码复用、效率等等都是我们可以加以改进的地方，这篇文章主要给大家介绍了关于Vue项目优化的一些实战策略，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
Vue3的provide和inject实现多级传递的原理解析
Vue3中的provide和inject函数通过原型链实现数据的多级传递,父组件使用provide注入数据,子组件和后代组件通过inject获取这些数据,在创建组件实例时,子组件会继承父组件的provides属性对象,介绍Vue3的provide和inject实现多级传递的原理,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了详解Vue中Axios封装API接口的思路及方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了vue自定义穿梭框支持远程滚动加载,iview是全局注入，基本使用原先的类名进行二次创建公共组件，修改基础js实现逻辑，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了Vue之生命周期函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
如何给element plus中动态form-item增加校验的可行方法
文章主要介绍了ElementPlus中动态生成el-form-item时如何使用内置校验机制,通过设置prop属性和使用行内定义规则,结合v-model绑定响应式数据,实现动态表单项的校验,还提到可以定义规则函数优化代码,并在提交时统一提示校验未通过的错误2026-04-04
在现代前端开发中,表单组件是业务系统中不可或缺的重要组成部分,下面这篇文章主要介绍了vue表格组件封装的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-03-03
这篇文章主要介绍了vue2中使用quill编辑器+表格功能,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
这篇文章主要介绍了antd vue table表格内容如何格式化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
最新评论