Js & Vue 几行代码实现一个简单的滚动加载触发（思路）

实现步骤

指定滚动容器元素
绑定滚动事件
触发条件：scrollTop + viewport >= scrollHeight

开始实现

完成 1 - 2 步骤，这里我们简单使用 vue 中的 @scroll 给容器绑定事件，

// scroll.vue
<template>
    <div class="scroll__container" @scroll="onScroll">
      <div class="item" v-for="item in 20" :key="item">
        <h1>{
   
   { item }}</h1>
      </div>
    </div>
</template>

<script>
export default {
      
      
    methods: {
      
      
      onScroll(event) {
      
      
         // ...
      }
    },
}
</script>

<style lang="scss">
.scroll__container {
      
      
  height: 100vh;
  overflow: scroll;
}
</style>

好了，接下来我们只需关心第 3 步骤，如何计算？
在 Js 滚动事件中，我们知道它会返回很多信息，其中就包含了 scrollTop 属性，
这个属性是一个滚动值 scrollTop。我们先来看看滑动到最底部时它所对应的值是多少。
如图：
在这里插入图片描述

我们可以看到 scrollTop 的值是 445，知道了最大滚动值后，下一步我们要获取内容容器的最大高度的是多少，这里就要用到了 scrollHeight 属性，我们来看看打印什么。
如图：
在这里插入图片描述

我们可以看到 scrollHeight 的值是 1112 ，比 scrollTop 多了 667，
所以只要 scrollTop + 667 >= scrollHeight 就可以确定是滚到底部了，
那这个 667 就这么写死吗？我想聪明的小伙伴应该知道这个 667 其实
是手机的可视区域 (viewport)，由于每个手机的屏幕大小不同，可视区域 也就不同，因此我们可以借助 clientHeight 属性动态获取对应的 可视区域，
所以触发条件就是 scrollTop + clientHeight >= scrollHeight
接下来我们开始写 onScroll 里面的代码吧。

onScroll(event) {
  const { scrollHeight, scrollTop, clientHeight } = e.target
  if (clientHeight + scrollTop >= scrollHeight) {
    alert('滚动到底部啦~')
  }
 }

好了，来看看效果图：
在这里插入图片描述

如果你还想要提前触发，只需加上任意数值 number
scroll + viewport + number >= scrollHeight

onScroll(event) {
  const offsetTop = 150
  const { scrollHeight, scrollTop, clientHeight } = e.target
  if (clientHeight + scrollTop + offsetTop >= scrollHeight) {
    alert('滚动到底部啦~')
  }
}

怎么样，是不是很简单，关键代码也就那么几行，欢迎有问题的小伙伴可以到下方留言哦。