vue滾動

1、監聽滾動事件

利用VUE寫一個在控制檯打印當前的scrollTop,

首先,在mounted鉤子中給window添加一個滾動滾動監聽事件,

mounted () {
window.addEventListener('scroll', this.handleScroll)
},
然後在方法中,添加這個handleScroll方法

handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
},
2、監聽元素到頂部的距離  並判斷滾動的距離如果大於了元素到頂部的距離時,設置searchBar爲true,否則就是false

handleScroll () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
let offsetTop = document.querySelector('#searchBar').offsetTop
scrollTop > offsetTop ? this.searchBarFixed = true : this.searchBarFixed = false
},
注意,如果離開該頁面需要移除這個監聽的事件,不然會報錯。

destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章