前端vue滚动条滚动监听问题成功解决办法
作者：加仑小铁
在Vue中监听滚动事件可以通过使用指令或者自定义事件来实现,这篇文章主要给大家介绍了关于前端vue滚动条滚动监听问题成功解决的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言
前端处理滚动条滚动事件无非就是监听scroll事件，但是我们经常会遇到 滚动事件频繁触发， 无法正常获取滚动的元素，最常见的就是 处理滚动位置
vueuse------useScroll的使用
安装说明
vue3
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>
<!--第一个参数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.可以手动设置滚动位置
3.这个方法也提供自定义指令的方式
自定义指令vScroll在@vueuse/components中
import { vScroll } from '@vueuse/components'
Vue.directive('scroll', vScroll)
<div id="container" ref="container" v-scroll="onScroll" class="container"></div>
onScroll({ x, y, isScrolling, arrivedState, directions }) {
this.x = x
this.y = y
this.isScrolling = isScrolling
this.arrivedState = arrivedState
this.directions = directions
}
4.场景
1.滚动到底部，出现‘返回顶部’按钮
2.滚动到底部，加载新数据
3.其他
总结
到此这篇关于前端vue滚动条滚动监听问题成功解决的文章就介绍到这了,更多相关前端vue滚动条滚动监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！