vue监听滚动事件的方法


Posted in Vue.js onDecember 21, 2020

vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附; 2. 根据滚动的位置激活对应的tab键(锚链接tab键)

这两种方式的处理都是可通过监听scroll来实现

mounted(){
window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理
}

处理方法

1. 滚动到顶部吸附

html元素

<!--如果isFixed为true的话,就添加class is_fixed 设置固定定位-->
<div id="boxFixed" :class="{'is_fixed' : isFixed}">
这个是要滚动到顶部吸附的元素
</div>

methods方法

handleScroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量

let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滚动到顶部吸附的元素的偏移量

this.isFixed = scrollTop > offsetTop ? true : false; // 如果滚动到顶部了,this.isFixed就为true
}

2. 根据滚动的位置激活对应的tab键(锚链接tab键)

vue里实现锚链接,不能直接用a链接方式,因为用的是hash路由,直接a链接会跳转路由,可用scrollIntoView ,具体参照 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

(1) 实现锚链接:

<div class="flexitem" v-for="(item,index) in tabs" :class="seeThis==index?'active':''"><a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(index)">{{item}}</a></div>

<div id="anchor1">block1</div>

(2) 实现滚动到相应的位置激活tab

data(){
return{


seeThis:0,


tabs:['tab0','tab1','tab2'],

}
},
methods:{

goAnchor(index) { // 也可以用scrollIntoView方法, 但由于这里头部设置了固定定位,所以用了这种方法


// document.querySelector('#anchor'+index).scrollIntoView()


this.seeThis = index; var anchor = this.$el.querySelector('#anchor'+index)


document.body.scrollTop = anchor.offsetTop-100


document.documentElement.scrollTop = anchor.offsetTop-100

},
}
methods:{
handleScroll(){


var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop-100


var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop-100


var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop-100


if(scrollTop>anchorOffset0&&scrollTop<anchorOffset1){



this.seeThis = 0


}


if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){



this.seeThis = 1


}


if(scrollTop>anchorOffset2){



this.seeThis = 2


}

},
}

以上就是vue监听滚动事件的方法的详细内容,更多关于vue监听滚动事件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 #Vue.js
Vue——前端生成二维码的示例
Dec 19 #Vue.js
You might like
php 结果集的分页实现代码
2009/03/10 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
全面了解js中的script标签
2016/07/04 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
vue-router定义元信息meta操作
2020/12/07 Vue.js
Python科学计算包numpy用法实例详解
2018/02/08 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
Java面试笔试题大全
2016/11/23 面试题
2014年九一八事变演讲稿
2014/09/14 职场文书
少先队中队工作总结
2015/08/14 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript