欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

  • Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例

    Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例

    最近在學(xué)習(xí)前段后分離,本文介紹了Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
    2021-11-11
  • Vue前端書寫規(guī)范大全(非常詳細(xì)!)

    Vue前端書寫規(guī)范大全(非常詳細(xì)!)

    在團(tuán)體開發(fā)項(xiàng)目中,為了團(tuán)隊(duì)所有成員書寫可維護(hù)的代碼,而不是一次性的代碼,讓團(tuán)隊(duì)當(dāng)中其他人看你的代碼能一目了然,下面這篇文章主要給大家介紹了關(guān)于Vue前端書寫規(guī)范的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • vue腳手架安裝以及安裝失敗問題解決辦法

    vue腳手架安裝以及安裝失敗問題解決辦法

    我們通常會(huì)用到腳手架vuecli創(chuàng)建項(xiàng)目,此時(shí)需要安裝腳手架,下面這篇文章主要給大家介紹了關(guān)于vue腳手架安裝以及安裝失敗問題的解決辦法,需要的朋友可以參考下
    2022-07-07
  • Vue-Cli中自定義過濾器的實(shí)現(xiàn)代碼

    Vue-Cli中自定義過濾器的實(shí)現(xiàn)代碼

    本篇文章主要介紹了Vue-Cli中自定義過濾器的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-08-08
  • Vue3?源碼分析reactive?readonly實(shí)例

    Vue3?源碼分析reactive?readonly實(shí)例

    這篇文章主要為大家介紹了Vue3?源碼分析reactive?readonly實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò)問題解決

    vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò)問題解決

    這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯(cuò),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • vue中的Object.freeze()?優(yōu)化數(shù)據(jù)方式

    vue中的Object.freeze()?優(yōu)化數(shù)據(jù)方式

    這篇文章主要介紹了vue中的Object.freeze()優(yōu)化數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue如何動(dòng)態(tài)給img賦值

    vue如何動(dòng)態(tài)給img賦值

    這篇文章主要介紹了vue如何動(dòng)態(tài)給img賦值,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue項(xiàng)目如何打包成移動(dòng)端APP

    Vue項(xiàng)目如何打包成移動(dòng)端APP

    這篇文章主要介紹了Vue項(xiàng)目如何打包成移動(dòng)端APP,本文通過圖文示例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-12-12
  • Vue.js函數(shù)式組件的全面了解

    Vue.js函數(shù)式組件的全面了解

    函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內(nèi)部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this(不需要實(shí)例化的組件),這篇文章主要給大家介紹了關(guān)于Vue.js函數(shù)式組件的相關(guān)資料,需要的朋友可以參考下
    2021-10-10

最新評(píng)論