前端vue成功解决滚动条滚动监听问题！

vueuse------useScroll的使用安装说明vue3

Vue2 的话还需要额外安装 @vue/composition-apiuseScroll的使用1.在@vueuse/core包下引入useScroll2.可以手动设置滚动位置3.这个方法也提供自定义指令的方式4.场景

前端处理滚动条滚动事件无非就是监听scroll事件，但是我们经常会遇到

滚动事件频繁触发，

无法正常获取滚动的元素，最常见的就是

处理滚动位置

vueuse------useScroll的使用

安装说明

vue3

<code>npm i @vueuse/core --save

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

npm i @vue/composition-api --save

useScroll的使用

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

import { useScroll } from '@vueuse/core'

<!--需要滚动的容器-->

<div id="container" ref="container" class="container"></div>code>

<!--第一个参数el(需要滚动的容器)-->

this.$nextTick(() => {

const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'))

this.x = x

this.y = y

this.isScrolling = isScrolling

this.arrivedState = arrivedState

this.directions = directions

})

<!--

x:用于记录上次滚动的scrollLeft的值,

y:记录上次滚动的scrollTop的值,

isScrolling: 表示是否正在滚动,

arrivedState: {top/right/bottom/left}表示滚动条是否到达指定边界，

directions： {top/right/bottom/left} 表示滚动条正在滚动的方向

-->

<!--第二个参数，可以设置偏移量offset(滚动条到达上下左右边界的一个偏移值,例如left设置为30， 则水平滚动条距离左边界30px时则认为到达了左边界)-->

const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'), { offset: { top: 0, bottom: 300, right: 30, left: 0 }})

<!--第二个参数，{behavior: smooth}设置平滑的滚动-->

const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'), { behavior: 'smooth' })

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