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

更新时间：2024年06月22日 09:38:37 作者：扶苏1002

Javascript实现当页面滚动到底部时触发加载事件,可以通过监听窗口的滚动事件,同时判断当前滚动条的位置和文档总高度来实现该功能,这篇文章主要给大家介绍了关于JS实现滚动触底的思路与代码,文中还附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来实现，和原生实现是一样的。

可视高度(offsetHeight)：通过 dom 的 offsetHeight 获得，表示区域固定的高度。这里我推荐通过 getBoundingClientRect() 来获取高度，因为使用前者会引起浏览器回流，造成一些性能问题。
滚动高度(scrollTop)：滚动事件中通过 e.target.scrollTop 获取，表示滚动条距离顶部的px
实际高度(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实现滚动触底内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现滚动条触底加载更多

JavaScript中的函数申明、函数表达式、箭头函数
js中的函数可以通过几种方式创建，具体创建方法通过实例代码给大家介绍的非常详细，文中通过例子给大家介绍了函数声明和表达式之间的差别，感兴趣的朋友跟随小编一起看看吧
2019-12-12
vscode 对 typescript代码调试的步骤
在VS Code中，要对 TypeScript代码进行调试，需要先编译 TypeScript 代码为JavaScript代码，这篇文章主要介绍了vscode对typescript代码调试的方法,需要的朋友可以参考下
2023-03-03
JS实现弹性漂浮效果的广告代码
这篇文章主要介绍了JS实现弹性漂浮效果的广告代码,涉及javascript动态操作图片弹性运动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
js实现简易计算器功能
这篇文章主要为大家详细介绍了js实现简易计算器功能，制作能进行加减乘除的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
javascript中对变量类型的判断方法
在JavaScript中，有5种基本数据类型和1种复杂数据类型，基本数据类型有：Undefined, Null, Boolean, Number和String；复杂数据类型是Object，Object中还细分了很多具体的类型，比如：Array, Function, Date等等
2015-08-08
微信小程序按钮巧妙用法
这篇文章主要介绍了微信小程序按钮巧妙用法,按钮组件功能比 HTML 中的 button 按钮丰富，通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等），需要的朋友可以参考下
2022-12-12
微信小程序中使用Async-await方法异步请求变为同步请求方法
这篇文章主要介绍了微信小程序中使用Async-await方法异步请求变为同步请求方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-03-03
HTML5 canvas 9绘制图片实例详解
HTML5 canvas 9绘制图片
2016-09-09
javascript获取dom的下一个节点方法
这篇文章主要介绍了javascript获取dom的下一个节点方法,实现在页面点击加减按钮数字的累加，需要的朋友可以参考下
2014-09-09
JavaScript树形数据结构处理
这篇文章主要介绍了JavaScript树形数据结构处理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-07-07