vue監聽滾動事件

2021-10-06 08:19:18 字數 591 閱讀 5471

vue中監聽滾動事件,然後對其進行事件處理,一般有:1. 滾動到頂部吸附; 2. 根據滾動的位置啟用對應的tab鍵(錨鏈結tab鍵)

這兩種方式的處理都是可通過監聽scroll來實現

mounted(),
處理方法

1. 滾動到頂部吸附

html元素

這個是要滾動到頂部吸附的元素

methods方法

handlescroll()
2. 根據滾動的位置啟用對應的tab鍵(錨鏈結tab鍵)

vue裡實現錨鏈結,不能直接用a鏈結方式,因為用的是hash路由,直接a鏈結會跳轉路由,可用scrollintoview ,具體參照

}

block1

block2

block3

data()

},methods:,

}

(2) 實現滾動到相應的位置啟用tab

methods:

},}

監聽滾動事件

1.vue元件新增滾動事件 export default methods 計算滾動盒子高度 移動端中滾動框的高度受裝置的影響,由於移動端中使用rem的緣故,因此高度是不定的,所以計算高度是不可少的。一般使用 document.getelementbyid div offsetheight docum...

vue專案中實現監聽滾動條滾動事件並滾動到固定位置

研究了兩天,終於實現了自己想要的功能,先說這個功能就是監聽滾動條,讓他到達某個位置後停止,比如吸頂功能。這個功能我在網上查了兩天,基本沒有我想要的效果,全是吸頂的,無奈做了更多的功課。還有一種方法可以實現,就是position sticky。話不多說直接看效果圖 一 效果圖 就是標記這一塊,拉到下面...

vue專案監聽滾動事件,實現動態錨點

前幾天做專案的時候,需要實現乙個動態錨點的效果 如果是傳統專案,這個效果就非常簡單。但是放到 vue 中,就有兩大難題 1.在沒有 jquery 的 animate 方法的情況下,如何實現平滑滾動?2.如何監聽頁面滾動事件?在瀏覽了大量文章 進行多次嘗試之後,終於解決了這些問題 期間主要涉及到了 s...