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在图片上传的时候压缩图片
Nov 18 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 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利用单例模式实现日志处理类库
2014/02/10 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JavaScript DOM基础
2015/04/13 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Python模拟登录12306的方法
2014/12/30 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
C,C++的几个面试题小集
2013/07/13 面试题
交通法规咨询中心工作职责
2013/11/27 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
我爱我家教学反思
2014/05/01 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis