JS实现滚动触底加载数据的思路与代码(附PC端滚动分页)

作者：雾松时间：2026-10-31 14:17:15浏览：204

本文详细解析了前端滚动触底加载的实现原理，涵盖可视高度、滚动距离与实际高度的计算逻辑。通过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、运行效果展示

一、HTML与CSS布局结构

二、核心实现逻辑

一、HTML与CSS布局结构

触发条件判定公式为：可视高度 + 滚动距离 >= 实际高度。本文示例采用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>