主要思路就是获取每次滚动时候滚动条距离顶部的距离,然后触发事件。注意:如果scrollTop
一直是0的话,请查阅是否有元素设置了overfolw: hidden
,还有一个就是离开页面或者组件注销的时候解绑scroll事件,否则会出现多次触发事件。
在生命周期mounted中进行监听滚动:
mounted () {
window.addEventListener('scroll', this.scrollToTop)
},
在方法中定义监听滚动执行的方法:
scrollToTop() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
},
记得在离开当前路由解绑scroll
事件
beforeRouteLeave(to, form, next){
window.removeEventListener('scroll',this.scrollToTop);
next();
}