快捷導(dǎo)航

前端vue滾動(dòng)條滾動(dòng)監(jiān)聽(tīng)問(wèn)題成功解決辦法

更新時(shí)間：2024年09月05日 09:11:43 作者：加侖小鐵

在Vue中監(jiān)聽(tīng)滾動(dòng)事件可以通過(guò)使用指令或者自定義事件來(lái)實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于前端vue滾動(dòng)條滾動(dòng)監(jiān)聽(tīng)問(wèn)題成功解決的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

前端處理滾動(dòng)條滾動(dòng)事件無(wú)非就是監(jiān)聽(tīng)scroll事件，但是我們經(jīng)常會(huì)遇到 滾動(dòng)事件頻繁觸發(fā)， 無(wú)法正常獲取滾動(dòng)的元素，最常見(jiàn)的就是 處理滾動(dòng)位置

vueuse------useScroll的使用

安裝說(shuō)明

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'

<!--需要滾動(dòng)的容器-->
<div id="container" ref="container" class="container"></div>

<!--第一個(gè)參數(shù)el(需要滾動(dòng)的容器)-->
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:用于記錄上次滾動(dòng)的scrollLeft的值,
y:記錄上次滾動(dòng)的scrollTop的值,
isScrolling: 表示是否正在滾動(dòng),
arrivedState: {top/right/bottom/left}表示滾動(dòng)條是否到達(dá)指定邊界，
directions： {top/right/bottom/left} 表示滾動(dòng)條正在滾動(dòng)的方向
-->

<!--第二個(gè)參數(shù)，可以設(shè)置偏移量offset(滾動(dòng)條到達(dá)上下左右邊界的一個(gè)偏移值,例如left設(shè)置為30， 則水平滾動(dòng)條距離左邊界30px時(shí)則認(rèn)為到達(dá)了左邊界)-->
const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'), { offset: { top: 0, bottom: 300, right: 30, left: 0 }})

<!--第二個(gè)參數(shù)，{behavior: smooth}設(shè)置平滑的滾動(dòng)-->
const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'), { behavior: 'smooth' })

2.可以手動(dòng)設(shè)置滾動(dòng)位置

3.這個(gè)方法也提供自定義指令的方式

自定義指令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.場(chǎng)景

1.滾動(dòng)到底部，出現(xiàn)‘返回頂部’按鈕

2.滾動(dòng)到底部，加載新數(shù)據(jù)

3.其他

總結(jié)

到此這篇關(guān)于前端vue滾動(dòng)條滾動(dòng)監(jiān)聽(tīng)問(wèn)題成功解決的文章就介紹到這了,更多相關(guān)前端vue滾動(dòng)條滾動(dòng)監(jiān)聽(tīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: