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
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue实现input输入模糊查询的三种方式
Aug 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
PHP令牌 Token改进版
2008/07/18 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
实现python版本的按任意键继续/退出
2016/09/26 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python实现代码统计工具
2019/09/19 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
学生干部学习的自我评价
2014/02/18 职场文书
大学军训感言200字
2014/02/26 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Python 如何安装Selenium
2021/05/06 Python