需求:有个返回顶部的按钮,当页面滚动到一定距离时才显示
第一步先监听滚动条事件:
created() {
//在窗口滚动时调用监听窗口滚动方法
this.$nextTick(() => {
window.addEventListener('scroll', this.windowScrollListener, true);
})
},
如果滚动条事件失效有可能是因为没有添加true的原因,这里true的作用是,如果不加true,那么这个事件就会在冒泡阶段执行导致失效. 默认为false,改为true的时候它就会在捕获阶段执行
第二步获取滚动条的滚动距离
data定义:
data(){
return{
isVisable: false
}
}
事件:
//监听窗口滚动
windowScrollListener() {
//获取操作元素最顶端到页面顶端的垂直距离
var scrollTop = Math.floor(document.documentElement.scrollTop || document.body.scrollTop || document.querySelector('.app-main').scrollTop);
// console.log(scrollTop, "scrollTop");
if (scrollTop >= 480) {
this.isVisable = true; //大于480时显示元素
}
if (scrollTop < 480) {
this.isVisable = false; //小于480时隐藏元素
}
},
如果document.documentElement.scrollTop 或者 document.body.scrollTop一直为0,
原因:vue封装组件后,常常是在组件里面继续轮滑,而document.documentElement.scrollTop拿到的是最外层浏览器的轮滑高度,所有一直是0。
解决方法:通过 var scrollTop = document.querySelector("类名选择器").scrollTop;
以上步骤可百分百实现滚动条事件,亲测有效