本文详细解析了前端滚动触底加载的实现原理，涵盖可视高度、滚动距离与实际高度的计算逻辑。通过Vue示例展示了从基础判断到添加触发阈值、防重复触发及性能优化的完整代码演进过程，适用于PC端滚动分页加载场景。
一、HTML与CSS布局结构
可视区域高度固定为500px，通过设置 overflow-y: auto属性来启用滚动功能。
1.1、HTML结构
<template>
<div class="scroll" ref="scroll" @scroll="onScroll">
<div class="crad" v-for="i in 10" :key="i"></div>
</div>
</template>
1.2、CSS样式
<style lang="scss" scoped>
.scroll {
overflow: auto;
height: 500px;
.crad {
height: 200px;
margin-top: 10px;
background-color: red;
}
}
</style>
1.3、运行效果展示
二、核心实现逻辑
触发条件判定公式为：可视高度 + 滚动距离 >= 实际高度。本文示例采用Vue框架编写，其底层逻辑与原生JavaScript实现一致。
- 可视高度（offsetHeight）：通过DOM对象的
offsetHeight属性获取，代表容器固定的高度值。此处建议使用getBoundingClientRect()方法获取高度，因为直接使用前者可能引发浏览器回流（Reflow），从而带来性能损耗。 - 滚动高度
(scrollTop)：在滚动事件中通过e.target.scrollTop属性获取，代表滚动条距离顶部的像素值。 - 实际高度（
scrollHeight）：通过dom 的 scrollHeight属性获取，代表容器内所有内容的总高度（包含滚动部分），即文档的实际高度。
2.1、基础功能实现
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight
if (currentHeight >= scrollHeight) {
console.log('触底')
}
}
2.2、增加底部触发阈值
当前需求是当距离底部一定距离时即触发事件，而非必须完全触底。这与微信小程序中的onReachBottom机制类似。
定义一个表示距底部距离的变量
reachBottomDistance。此时触发条件调整为：可视高度 + 滚动距离 + reachBottomDistance >= 实际高度。
export default {
data(){
return {
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight) {
console.log('触底')
}
}
}
}
2.3、逻辑优化处理
当距离底部100px时触发事件，但由于100px以下的区域持续满足条件，会导致事件被重复触发，这不符合预期。
因此需进行额外处理，确保进入该区域后仅触发一次：
export default {
data(){
return {
flag: true,
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight && this.flag) {
console.log('触底')
this.flag = false
}
}
}
}
2.4、最终性能优化
实时计算位置信息会消耗性能，应将不变的数据缓存，仅对可变部分进行实时获取。
export default {
data(){
return {
flag: true,
reachBottomDistance: 100
offsetHeight: 0,
}
},
mounted(){
// 页面加载完成后 将可视区高度存储起来
let dom = this.$refs['scroll']
this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight && this.flag) {
console.log('触底')
this.flag = false
}
}
}
}
三、基于触底事件的分页加载实现
<template>
<div class="scroll"
ref='scroll'
@scroll="onScroll">
<div class="crad"
v-for="item in showList"
:key='item.id'></div>
<p v-show="status=='loading'">加载中</p>
<p v-show="status=='nomore'">没有更多了</p>
</div>
</template>
<script>
import { fetchList } from '@/api/index';
export default {
data () {
return {
flag: true,
reachBottomDistance: 100,
offsetHeight: 0,
// 展示区list
showList: [],
pageIndex: 1,
pageSize: 20,
totalPage: 0,
status: 'nomore'
};
},
mounted () {
// 页面加载完成后 将可视区高度存储起来
let dom = this.$refs['scroll']
this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
this.getDataList()
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight && this.flag) {
console.log('触底')
this.flag = false
this.pageIndex++;
this.getDataList();
}
},
getDataList () {
fetchList({ current: this.pageIndex, size: this.pageSize }).then((res) => {
let list = res.data.data.list;
this.totalPage = res.data.data.totalPage;
this.showList = this.showList.concat(list);
if (this.totalPage > this.showList.length) {
this.status = 'loading';
//如果还有更多重新设置flag为true
this.flag = true
} else {
this.status = 'nomore';
//没有更多flag设置为false不在执行触底加载
this.flag = false
}
});
}
}
}
</script>
<style lang='scss' scoped>
.scroll {
overflow: auto;
height: 500px;
.crad {
height: 200px;
margin-top: 10px;
background-color: red;
}
}
</style>总结
至此，关于JS实现滚动触底思路与代码的文章介绍完毕。如需了解更多JS滚动触底相关内容，请查阅本站历史文章或继续浏览后续文章，感谢大家的支持！