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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
vuex的使用步骤
Jan 06 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
thinkPHP引入类的方法详解
2016/12/08 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
浅谈python常用程序算法
2019/03/22 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python 的AES加密与解密实现
2019/07/09 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python库matplotlib绘制坐标图
2019/10/18 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
爱情检讨书大全
2014/01/21 职场文书
中学生运动会入场词
2014/02/12 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书