vue中監(jiān)聽scroll事件失效的問題及解決
更新時(shí)間：2022年09月16日 08:50:07 作者：°折月煮酒
這篇文章主要介紹了vue中監(jiān)聽scroll事件失效的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue監(jiān)聽scroll事件失效問題
vue項(xiàng)目中遇到需要監(jiān)聽頁面某個(gè)元素距頂部距離實(shí)現(xiàn)吸頂效果，正常的window.addEventListener('scroll', this.handleScroll)完全失效，經(jīng)過一段時(shí)間的探索發(fā)現(xiàn)這個(gè)事件在子組件中會(huì)遇到問題。
可以用元素上的 @scroll事件來監(jiān)聽滾動(dòng)，但有一點(diǎn)要注意，scroll的元素需要確認(rèn) 設(shè)置overflow-y:scroll；height:100%的樣式。
下面附實(shí)現(xiàn)成功的代碼
1.頂部元素添加 @scroll事件監(jiān)聽
<div class="specialty-store-page" ref="scrollBox" @scroll="handleBlScroll">
2.確保監(jiān)聽的元素 overflow-y:scroll；height:100%
3.監(jiān)聽事件
? ?handleBlScroll() {
? ? ? let _blTop = this.$refs.bl.getBoundingClientRect().top
? ? ? this.tabFixed = _blTop < 46
? ? ? this.navShowFlag = this.$refs.scrollBox.scrollTop > this.RootEM * 0.92
? ? ? let _gcTop = this.$refs.goodsContainer.getBoundingClientRect().top//這里是子元素距頂部的高度
? ? }可以在父元素中添加滾動(dòng)，通過 this.$refs.goodsContainer.getBoundingClientRect().top來獲取子元素的頂部距離進(jìn)行判斷
vue監(jiān)聽scroll事件
很小的功能，記錄一下
mounted() {
?? ?window.addEventListener('scroll', this.handleScroll, true)
},
methods: {
?? ?handleScroll: function() {
? ? ? ?? ?console.log(document.documentElement.scrollTop || document.body.scrollTop)
? ? }
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何在Vue3中實(shí)現(xiàn)自定義指令(超詳細(xì)!)
除了默認(rèn)設(shè)置的核心指令(v-model和v-show),Vue也允許注冊自定義指令,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)自定義指令的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
在瀏覽器console中如何調(diào)用vue內(nèi)部方法
這篇文章主要介紹了在瀏覽器console中如何調(diào)用vue內(nèi)部方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue使用vue-video-player插件播放視頻的步驟講解
在最近的項(xiàng)目中有一個(gè)視頻播放的功能,在之前的項(xiàng)目中沒有接觸過類似的功能,第一次接觸,把具體操作步驟一下,這篇文章主要給大家介紹了關(guān)于vue使用vue-video-player插件播放視頻的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue的特點(diǎn)之一是組件化開發(fā)，那么問題來了，組件中的數(shù)據(jù)和方法都是獨(dú)立的，我們?nèi)绾芜M(jìn)行組件之間的交互呢。這個(gè)時(shí)候就要用到組件傳參了2022-07-07
這篇文章主要介紹了antd form表單數(shù)據(jù)回顯操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue中動(dòng)態(tài)路由加載與ESLint錯(cuò)誤排查全指南
在現(xiàn)代前端開發(fā)中,Vue.js?結(jié)合?Webpack?的動(dòng)態(tài)路由加載能顯著提升應(yīng)用性能,本文將通過一個(gè)實(shí)際案例,詳細(xì)分析動(dòng)態(tài)路由加載的常見錯(cuò)誤,希望對(duì)大家有所幫助2025-04-04
這篇文章主要介紹了vue之moment的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家分享了Map.vue基于百度地圖組件重構(gòu)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了vue中的公共方法調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了Vue3.0組件通信mitt源碼ts實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11