前端vue乐成办理滚动条滚动监听问题！

前端处置惩罚滚动条滚动变乱无非就是监听scroll变乱，但是我们经常会遇到 滚动变乱频繁触发， 无法正常获取滚动的元素，最常见的就是 处置惩罚滚动位置
vueuse------useScroll的使用

安装分析

vue3

1. npm i @vueuse/core --save

复制代码

Vue2 的话还必要额外安装 @vue/composition-api

1. npm i @vue/composition-api --save

复制代码

useScroll的使用

1.在@vueuse/core包下引入useScroll

1. import { useScroll } from '@vueuse/core'

复制代码

1. <!--需要滚动的容器-->
2. <div id="container" ref="container" class="container"></div>

复制代码

1. <!--第一个参数el(需要滚动的容器)-->
2. this.$nextTick(() => {
3.   const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'))
4.   this.x = x
5.   this.y = y
6.   this.isScrolling = isScrolling
7.   this.arrivedState = arrivedState
8.   this.directions = directions
9. })
10. <!--
11. x:用于记录上次滚动的scrollLeft的值,
12. y:记录上次滚动的scrollTop的值,
13. isScrolling: 表示是否正在滚动,
14. arrivedState: {top/right/bottom/left}表示滚动条是否到达指定边界，
15. directions： {top/right/bottom/left} 表示滚动条正在滚动的方向
16. -->

复制代码

1. <!--第二个参数，可以设置偏移量offset(滚动条到达上下左右边界的一个偏移值,例如left设置为30， 则水平滚动条距离左边界30px时则认为到达了左边界)-->
2. const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'), { offset: { top: 0, bottom: 300, right: 30, left: 0 }})

复制代码

1. <!--第二个参数，{behavior: smooth}设置平滑的滚动-->
2. const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'), { behavior: 'smooth' })

复制代码

2.可以手动设置滚动位置

3.这个方法也提供自定义指令的方式

自定义指令vScroll在@vueuse/components中

1. import { vScroll } from '@vueuse/components'
3. Vue.directive('scroll', vScroll)
5. <div id="container" ref="container" v-scroll="onScroll" class="container"></div>
7. onScroll({ x, y, isScrolling, arrivedState, directions }) {
8.   this.x = x
9.   this.y = y
10.   this.isScrolling = isScrolling
11.   this.arrivedState = arrivedState
12.   this.directions = directions
13. }

复制代码

4.场景

1.滚动到底部，出现‘返回顶部’按钮
2.滚动到底部，加载新数据
3.其他

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。