实现步骤
- 指定滚动容器元素
- 绑定滚动事件
- 触发条件:
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('滚动到底部啦~')
}
}
怎么样,是不是很简单,关键代码也就那么几行,欢迎有问题的小伙伴可以到下方留言哦。