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

npm i @vueuse/core --save

npm i @vue/composition-api --save

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' })

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
}