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与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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框架Laravel学习心得体会
2015/10/28 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
angularJS 入门基础
2015/02/09 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
四种会话跟踪技术
2015/05/20 面试题
楼面部长岗位职责范本
2014/02/14 职场文书
暑期培训随笔感言
2014/03/10 职场文书
教师一岗双责责任书
2014/04/16 职场文书
不错的求职信范文
2014/07/20 职场文书
擅自离岗检讨书
2014/09/12 职场文书