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的拖拽数据可视化功能实现
Dec 04 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue router 动态路由清除方式
May 25 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入门小知识
2008/03/24 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
利用Psyco提升Python运行速度
2014/12/24 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python tkinter控件布局项目实例
2019/11/04 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
windows支持哪个版本的python
2020/07/03 Python
总经理职责范文
2013/11/08 职场文书
运动会100米解说词
2014/01/23 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
整改落实自查报告
2014/11/05 职场文书
居委会工作总结2015
2015/05/18 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python